我有一个与它相交的三 Angular 形的盒子,我想从盒子上切出一个类似的三 Angular 形,这样两者之间就有一个白色间隙。由于这有点难以解释,我创建了一个 jsFiddle here这显示了我已经拥有的。
这是截图
HTML
<div id="alertdetails">
<h2>UH OH</h2>
Date: 05/11/2012 15:57:46
<br><br>
<a href="">View</a>
</div>
<div id="arrow-right"></div>
CSS
#alertdetails {
background-color: #F8F8F8;
border: 1px solid #CCCCCC;
border-radius: 5px 5px 5px 5px;
left: 25px;
padding: 20px;
position: absolute;
text-shadow: 0 1px #FFFFFF;
top: 15px;
}
#arrow-right {
position: absolute;
top: 45px;
left: 15px;
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 20px solid #303030;
}
最佳答案
您可以通过使用 UTF-8“right arrow”和 :before
伪类来完成此操作,而无需箭头的额外 DIV。这将使您对箭头的样式有更多的控制。
#alertdetails {
background-color: #F8F8F8;
border: 1px solid #CCCCCC;
border-radius: 5px 5px 5px 5px;
left: 25px;
padding: 20px;
position: relative;
margin-top:15px;
text-shadow: 0 1px #FFFFFF;
}
#alertdetails::before {
content:"\25b6";
position:absolute;
top:20px;
left:-20px;
font-size:60px;
color:#ffffff;
}
关于CSS 三 Angular 形被剪掉,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13235858/