Popover填充白色和彩色边框

Question

我收到了这段代码：

<ul>
    <li> 
        <a href="#"></a>
        <div class="container"></div>
        <div class="data"></div>
    </li>
</ul>

// --------------------------- CSS -------------------------- //

.data:before {
    content:'';
    float: right;
    margin: -15px 15px;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-bottom: 15px solid red;
}

.data {
    background-color: white;
    height: 100px;
    border: 2px solid red;
}

如何让我的三角形（popover）为白色填充和红色边框？由于它以“边界”属性制作，我可以使用阴影吗？

以下是fiddle

Answer 1

使用:before和after

＆＃13;

＆＃13;

.data:before,.data:after{
    content:'';
    float: right;
}
.data:before {
    margin: -15px 15px;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-bottom: 15px solid red;
}
.data:after {
    margin: -12px 20px;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid white;
}
.data {
    background-color: white;
    height: 100px;
    border: 2px solid red;
}

＆＃13;

<ul>
    <li> 
        <a href="#"></a>
        <div class="container"></div>
        <div class="data"></div>
    </li>
</ul>

＆＃13;

＆＃13;

＆＃13;

或使用rotate

＆＃13;

＆＃13;

.data:before {
    content:'';
    position:absolute;
    right:10px;
    top:-11px;
    width:16px;
    height:16px;
    border:2px solid red;
    border-right:none;
    border-bottom:none;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg);
}

.data {
    background-color: white;
    height: 100px;
    border: 2px solid red;
    position:relative
}

＆＃13;

<ul>
    <li> 
        <a href="#"></a>
        <div class="container"></div>
        <div class="data"></div>
    </li>
</ul>

＆＃13;

＆＃13;

＆＃13;