类似书签的样式
程序员文章站
2024-01-29 23:46:22
...
1.效果展示
2.html代码
<div class="wrap">
<div class="content">书签样式书签样式</div>
</div>
3.样式代码
.wrap {
width: 500px;
height: 300px;
margin: 100px auto;
border:1px solid #333;
overflow: hidden;
}
.content {
position: relative;
background: #ff0000;
left: 33%;
top: 50%;
padding:0 5px 0 35px;
height: 50px;
line-height: 50px;
transform: translate(-50%,-50%);
float: left;
margin-left: 24px;
color: #fff;
}
.content::before {
content: '';
position: absolute;
border-top: 25px solid transparent;
border-left: 25px solid #fff;
border-bottom: 25px solid transparent;
left: -1px ;
top: 0;
}
.content::after {
content: '';
position: absolute;
border-top: 25px solid transparent;
border-left: 25px solid red;
border-bottom: 25px solid transparent;
right: -25px;
top: 0;
}
上一篇: 利用伪元素设置元素是否选中状态