类似书签的样式

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;
	}