首先我们先给他设置宽高以及边框
<style type="text/css">
div{
width: 100px;
height: 80px;
background-color: lightcoral;
border: 50px solid red;
border-top-color: yellow; //上边的颜色
border-right-color: blue; //右边颜色
border-bottom-color: orange; //下边颜色
}
</style>
<body>
<div></div>
</body>
效果如下
接下来设置那个小三角
<style type="text/css">
div{
width: 0px;
height: 0px; //宽高设置为0
/* background-color: lightcoral; */ //去掉背景颜色
border: 50px solid red;
border-top-color: transparent; //设置透明
border-right-color:transparent;
border-bottom-color: transparent;
}
</style>
小三角就设置好了