我需要构建一个消息夹,其尖端为带边框的三 Angular 形。我设法构建了提示 using two triangles :
#triangle-border {
width: 0px;
height: 0px;
border-style: solid;
border-width: 0 100px 80px 100px;
border-color: transparent transparent #edb2b7 transparent;
}
#triangle-content {
position:absolute;
top: 20px;
width: 0px;
height: 0px;
border-style: solid;
border-width: 0 100px 80px 100px;
border-color: transparent transparent #F9EDEF transparent;
}
我相信它可以用一个 HTML 对象来完成,但我只是不知道如何做。你能帮忙吗?
我已经添加了我正在尝试构建的消息容器的示例
最佳答案
这里 FIDDLE 强>。 :after
和 :before
称为伪元素。
<div id="message-holder"></div>
#message-holder {
margin-top:50px;
width:300px;
height:300px;
background: #F9EDEF;
position:relative;
border:1px solid #edb2b7;
}
#message-holder:before,#message-holder:after{
content:"";
position:absolute;
top:-24px;
left:25px;
border-bottom:25px solid #f9edef;
border-left:25px solid transparent;
border-right:25px solid transparent;
}
#message-holder:before{
top:-25px;
border-bottom-color:#edb2b7;
}
关于html - 带有纯CSS边框的三 Angular 形,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22287986/