css尖头样式

来源：互联网发布：cnc加工中心手动编程编辑：程序博客网时间：2024/05/04 19:08

<!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>

0 0