Css 填充白色和彩色边框的府绸

我得到了这个密码：

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

//------------------------------------CSS------------------//
.数据：之前{
内容：''；
浮动：对；
利润率：-15px 15px；
左边框：15px实心透明；
右边框：15px实心透明；
边框底部：15px纯红；
}
.数据{
背景色：白色；
高度：100px；
边框：2倍纯红；
}

我怎样才能使我的三角形（府绸）是白色填充和红色边框？因为它是用“边框”制作的，我可以用阴影吗

---

以下是使用

:before

和

after

.data:before、.data:after{
内容：''；
浮动：对；
}
.数据：之前{
利润率：-15px 15px；
左边框：15px实心透明；
右边框：15px实心透明；
边框底部：15px纯红；
}
.数据：之后{
利润率：-12px 20px；
左边框：10px实心透明；
右边框：10px实心透明；
边框底部：10px纯白；
}
.数据{
背景色：白色；
高度：100px；
边框：2倍纯红；
}

不带阴影，因为它是长方体阴影而不是三角形阴影。-关于如何实现它有什么想法吗？我正在考虑使用bootstrap的，您需要在原始元素的基础上使用另一个伪元素。很乱。