我正在尝试在不恢复为右上角使用图像的情况下实现此对话框。以下是我的实现。
.box{
-webkit-border-radius: 6px 6px;
-moz-border-radius: 6px / 6px;
-khtml-border-radius: 6px / 6px;
border-radius: 6px / 6px;
width:33%;
border: 1px solid #DDD;
display: inline-block;
margin-right:10px;
margin-bottom: 10px;
max-width: 290px;
padding: 10px;
}
.triangle-topright {
width: 0;
height: 0;
border-top: 50px solid #fafad6;
border-left: 50px solid transparent;
-webkit-border-top-right-radius: 6px 6px;
-moz-border-radius-topright: 6px / 6px;
-khtml-border-top-right-radius: 6px / 6px;
border-top-right-radius: 6px / 6px;
float: right;
margin-top: -10px;
margin-right: -10px;
}
<div class="box">
<div class="triangle-topright"></div>
<h3>title</h3>
<p>stuff</p>
</div>
问题是这适用于 safari,但适用于 chrome,-webkit-border-top-right-radius: 6px 6px;似乎引起了冲突。激活后,右上角会变圆,但三 Angular 形会消失。
有解决办法吗?或者有更好的方法吗?
谢谢。
最佳答案
一个似乎有效的解决方案(在 Chrome、Safari、Firefox 中测试过)是从 .triangle-topright
中删除以下行
-webkit-border-top-right-radius: 6px 6px;
-moz-border-radius-topright: 6px / 6px;
-khtml-border-top-right-radius: 6px / 6px;
border-top-right-radius: 6px / 6px;
而不是简单地将 overflow: hidden;
添加到 .box
CSS。
关于firefox - css3三 Angular 形带一个圆 Angular ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13147034/