css - 弹出框填充白色和彩色边框

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

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

这是 fiddle

Answer 1

使用 :before 和 after

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

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

或使用旋转

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

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