我正在使用 CSS3 并制作一些气泡。
我有一个问题,我需要一个边框为 1px 的三 Angular 形,但是我的代码有一个粗三 Angular 形..
这是我的 fiddle :FIDDLE
和代码:
<p class="triangle-border right">hi hi</p>
.triangle-border {
position:relative;
padding:15px;
color:#333;
background:#fff;
margin-left:100px;
margin-right:100px;
}
.triangle-border.right {
margin-right:50px;
border:3px solid #EEEEEF;
}
.triangle-border:before {
content:"";
position:absolute;
bottom:-20px; /* value = - border-top-width - border-bottom-width */
left:40px; /* controls horizontal position */
border-width:20px 20px 0;
border-style:solid;
border-color:#EEEEEF transparent;
/* reduce the damage in FF3.0 */
display:block;
width:0;
}
/* creates the smaller triangle */
.triangle-border:after {
content:"";
position:absolute;
bottom:-13px; /* value = - border-top-width - border-bottom-width */
left:47px; /* value = (:before left) + (:before border-left) - (:after border-left) */
border-width:13px 13px 0;
border-style:solid;
border-color:#fff transparent;
/* reduce the damage in FF3.0 */
display:block;
width:0;
}
/* creates the larger triangle */
.triangle-border.right:before {
top:10px; /* controls vertical position */
bottom:auto;
left:auto;
right:-30px; /* value = - border-left-width - border-right-width */
border-width:15px 0 15px 30px;
border-color:transparent #EEEEEF;
}
/* creates the smaller triangle */
.triangle-border.right:after {
top:16px; /* value = (:before top) + (:before border-top) - (:after border-top) */
bottom:auto;
left:auto;
right:-21px; /* value = - border-left-width - border-right-width */
border-width:9px 0 9px 21px;
border-color:transparent #fff;
}
你看到右边的三 Angular 形了吗?我需要一个只有 1 像素边框的三 Angular 形。谢谢!
最佳答案
/* creates the larger triangle */
.triangle-border.right:before {
top:14px; /* controls vertical position */
bottom:auto;
left:auto;
right:-22px; /* value = - border-left-width - border-right-width */
border-width:11px 0 11px 22px;
border-color:transparent #EEEEEF;
}
我刚玩过 border-width 和 top/left 定位
关于css3气泡,1px的三 Angular 形,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21412229/