欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

类似书签的样式

程序员文章站 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;
	}