如何製作此角形邊框（如圖中所示）？

我想用這種角度區域製作div邊框。正如它在圖片中所說的，我標記了紅色的橢圓形。如何製作此角形邊框（如圖中所示）？

這是我到目前爲止已經試過：

HTML：

<div class="box"> 
    <header><b>List header</b></header> 
     <ul> 
      <li>List 1</li> 
      <li>List 2</li> 
      <li>List 3</li> 
     </ul> 
</div>

CSS：

.box{ 
    border:2px solid gray; 
    background: #DC143C; 
    padding:10px; 

} 
.box ul{ 
    list-style-type:square; 
}

見demo

來源

2015-05-23 Munira

有這樣一個沒有邊界。您需要以這種方式塑造一個新元素，並將其放在左邊界附近以實現此視覺效果。 – Banana

看看[這個線程]（http://stackoverflow.com/questions/30299093/speech-bubble-with-arrow）。你想要達到的形狀需要與其中提到的類似的方法。 – Harry

HEY BANANA，請告訴我如何。 – Munira

你可以用帶有邊框的純CSS來做到這一點。使用css創建一個帶有:after僞類的內容，然後將其高度和寬度設置爲0.您可以通過更改border-width屬性來更改三角形的寬度。比說更容易展現它。這是一個demo Fiddle玩耍。

HTML

<div></div>

CSS

div { 
    display: inline-block; 
    height: 110px; 
    width: 500px; 
    background: tomato; 
    margin-left: 150px; 
} 
div:after{ 
    content: ''; 
    width: 0; 
    height: 0; 
    border-style: solid; 
    border-width: 40px 100px 40px 0; 
    border-color: transparent tomato transparent transparent; 
    position: absolute; 
    left: 60px; 
    top: 20px; 
}

來源

2015-05-23 15:24:50

非常感謝，但它需要非常準確的計算，並且如果我猜測正確的話，可能會被不同的解析和瀏覽器破壞。 – Munira

如果你正在談論絕對定位包裝你的菜單與股利，並使其相對定位。所以三角形會留在你想要的地方並且可以安全地使用https://jsfiddle.net/f1ot4gf1/1/ –

如何製作此角形邊框（如圖中所示）？

回答

相關問題