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 {

  width: 150px;

  min-height: 150px;

  background: #ccc;

  padding: 8px;

  padding-right: 6%;

  display: inline-block;

  clip-path: polygon(0% 0%,0% 100%,90% 100%,90% 5%,100% 10%,90% 15%,90% 0%);

}

<div class="container">

test content

</div>