css尖头样式

最新推荐文章于 2021-08-03 23:06:34 发布

goinni

最新推荐文章于 2021-08-03 23:06:34 发布

阅读量863

点赞数

CC 4.0 BY-SA版权

分类专栏： css

本文链接：https://blog.csdn.net/goinni/article/details/51605745

css 专栏收录该内容

6 篇文章

订阅专栏

<!DOCTYPE html>

<html style="font-size=12px">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="utf-8">
<title>Hello World App</title>
<style type="text/css">
.uu-mark{
position: relative;
height: 1.875rem;
overflow: hidden;
font-size: 16px;
}
.uu-mark .left-rian{
position: relative;
z-index: 2;
}
.uu-mark .right-rian{
position: relative;
left: -0.625rem;
z-index: 1;

}
.uu-mark .right-rian div,
.uu-mark .left-rian div{
float: left;
}
.uu-mark .left-rian div:nth-child(1){
width: 3.75rem;
height: 1.875rem;
}
.uu-mark .right-rian div:nth-child(2),
.uu-mark .left-rian div:nth-child(2){
width: 0;
height:0;
line-height:0;
overflow:hidden;
border-width:0.9375rem 0px 0.9375rem 0.9375rem;
border-style:solid;
}

.uu-mark .right-rian div:nth-child(1){
width: 1.875rem;
height:0px;
line-height:0;
overflow:hidden;
border-width:0.9375rem;
border-style:solid;
border-color: yellow yellow yellow white;
}
.uu-mark .yellow div:nth-child(1){
border-color: yellow yellow yellow white;
background: yellow;
}
.uu-mark .yellow div:nth-child(2){
border-color:transparent transparent transparent yellow;
}
.uu-mark .green div:nth-child(1){
border-color: #13d569 #13d569 #13d569 white;
background: #13d569;
}
.uu-mark .green div:nth-child(2){
border-color:transparent transparent transparent #13d569;
}

</style>
</head>
<body>
<div class="uu-mark">
<div class="left-rian green">
<div></div>
<div></div>
</div>
<div class="right-rian yellow">
<div></div>
<div></div>
</div>
</div>

</body>
</html>