CSS三角形自定义边框颜色

Question

CSS三角形自定义边框颜色

尝试为我的CSS三角形(边框)使用自定义十六进制颜色。但是，由于它使用了边框属性，所以我不确定如何这样做。我想避开javascript和CSS 3仅仅是因为兼容性。我试图让三角形有一个白色的背景与一个1 px边框(围绕三角形的角度)与颜色#CAD 5E0。这个是可能的吗？到目前为止，我的情况如下：

.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;}

我的小提琴：http://jsfiddle.net/4ZeCz/

Answer 1

你得用两个三角形来假装..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;}更新的Fiddle在这里

Answer 2

我认为这是一个简单的使用夹径:.container {&nbsp; width: 150px;&nbsp; min-height: 150px;&nbsp; background: #ccc;&nbsp; padding: 8px;&nbsp; padding-right: 6%;&nbsp; display: inline-block;&nbsp; clip-path: polygon(0% 0%,0% 100%,90% 100%,90% 5%,100% 10%,90% 15%,90% 0%);}<div class="container">test content</div>