CSS三角形自定义边框颜色 [英] CSS triangle custom border color
本文介绍了CSS三角形自定义边框颜色的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
尝试为我的css三角形(边框)使用自定义十六进制颜色。但是由于它使用边界属性,我不确定如何去做这个。我想避开javascript和css3只是因为兼容性。我试图让三角形有白色背景与1px边框(三角形的有角的两侧)与颜色#CAD5E0。这可能吗?这是我到目前为止:
.container {
margin-left:15px;
width:200px;
background:#FFFFFF;
border:1px solid#CAD5E0;
padding:4px;
position:relative;
min-height:200px;
}
.container:after {
content:'';
display:block;
position:absolute;
top:10px;
left:100%;
width:0;
height:0;
border-color:transparent透明#CAD5E0;
border-style:solid;
border-width:10px;
}
我的小提琴:
Attempting to use a custom hex color for my css triangle (border). However since it uses border properties I am unsure how to go about doing this. I would like to steer clear of javascript and css3 simply because of compatibility. I am trying to have the triangle have a white background with a 1px border (around the angled sides of the triangle) with color #CAD5E0. Is this possible? Here's what I have so far:
.container {
margin-left: 15px;
width: 200px;
background: #FFFFFF;
border: 1px solid #CAD5E0;
padding: 4px;
position: relative;
min-height: 200px;
}
.container:after {
content: '';
display: block;
position: absolute;
top: 10px;
left: 100%;
width: 0;
height: 0;
border-color: transparent transparent transparent #CAD5E0;
border-style: solid;
border-width: 10px;
}
My fiddle: http://jsfiddle.net/4ZeCz/
解决方案
You actually have to fake it with two triangles....
.container {
margin: 15px 30px;
width: 200px;
background: #fff;
border: 1px solid #a00;
position: relative;
min-height: 200px;
padding: 20px;
text-align: center;
color: #fff;
font: bold 1.5em/180px Helvetica, sans-serif;
text-shadow: 0 0 1px #000;
}
.container:after,
.container:before {
content: '';
display: block;
position: absolute;
left: 100%;
width: 0;
height: 0;
border-style: solid;
}
.container:after {
top: 10px;
border-color: transparent transparent transparent #fdd;
border-width: 10px;
}
.container:before {
top: 9px;
border-color: transparent transparent transparent #a00;
border-width: 11px;
}
这篇关于CSS三角形自定义边框颜色的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文