只有HTML和CSS的尖銳邊緣

通過向您展示示例，更容易解釋我想要實現的目標。只有HTML和CSS的尖銳邊緣

div{ 
 
     width:100px;height:100px; 
 
     border:3px solid #900; 
 
     border-radius:0px 0px 140px 0px; 
 
    }

 
 
    <div></div>

我想提請右上和左下角之間的尖銳，直接線（點至點）。我如何用border-radius來做到這一點？

來源

2017-04-14 lippr

你想做一個半圈？ – disinfor

@disinfor號我想在兩條邊之間劃一條線：右上角和左下角 – lippr

您可以上傳您正在嘗試做什麼的圖片嗎？ – disinfor

你試圖與邊框的直角三角形？

div { 
 
    width: 0; 
 
    height: 0; 
 
    border-style: solid; 
 
    border-width: 200px 200px 0 0; 
 
    border-color: #007bff transparent transparent transparent; 
 
    position: relative; 
 
} 
 

 
div::before { 
 
    width: 0; 
 
    height: 0; 
 
    border-style: solid; 
 
    border-width: 182px 182px 0 0; 
 
    border-color: white transparent transparent transparent; 
 
    content: ''; 
 
    display: block; 
 
    top: -195px; 
 
    left: 5px; 
 
    position: absolute; 
 
    z-index: 2; 
 
}

<div></div>

誠然，這是是一個有點古怪的方式來獲得你以後，因爲它需要一些精確的操作，以看起來是正確的 - 儘管這是一個辦法，只有用CSS，來實現你的目標。

來源

2017-04-14 15:14:03 Santi

@lippr - 當我問到「它是否必須是邊界半徑？」時，這是我想到的解決方案，並且您說是 - 但您已接受此答案。（@santi - 支持你，我認爲這是一個很有效的創造性解決方案） –

試試這個：

div { 
 
    width: 100px; 
 
    height: 100px; 
 
    border: 3px solid #900; 
 
    border-radius: 140px; 
 
    border-top-left-radius: 0px; 
 
    border-bottom-right-radius: 0px; 
 
}

<div></div>

來源

2017-04-14 15:05:18

如果你想要它更多的是一個矩形，然後改變邊界半徑從140px到更少。 –

這是你想要的結果..還挺這裏做太多的定位。

div { 
 
    width: 100px; 
 
    height: 100px; 
 
    border-top: 3px solid #900; 
 
    border-left: 3px solid #900; 
 
    position: absolute; 
 
} 
 

 
div:after { 
 
    content: ''; 
 
    width: 144px; 
 
    height: 3px; 
 
    background: #900; 
 
    position: absolute; 
 
    display: inline-block; 
 
    top: 47px; 
 
    left: -23px; 
 
    transform: rotate(-45deg); 
 
}

<div></div>

來源

2017-04-14 15:13:34

你認爲SVG是一個可行的解決方案嗎？

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>SVG demo</title> 
 
</head> 
 
<body> 
 
    <svg width="100" height="100"> 
 
    <polygon points="0,0 100,0 0,100" style="fill:white;stroke:red;stroke-width:3;" /> 
 
    </svg> 
 
</body> 
 
</html>

來源

2017-04-14 15:16:49 Badacadabra

只有HTML和CSS的尖銳邊緣

回答

相關問題