css斜切角、切边

纯css斜切角、切边

样式图：

HTML代码：

<div class="cutwrap">
	<div class="cut" aos="fade-right">
		<h3>宫崎骏</h3>
		<h4>千与千寻</h4>
		<p>再漫长的故事，也有完结的时候；<br>
		行驶的再慢的列车，也有一个又一个的站台；<br>
		再亲密无间的旅伴，也有分开的时候。</p>
	</div>
</div>

css样式：

.cutwrap{width: 100%;box-sizing: border-box;padding: 100px 0;}
.cut{width: 35%;margin: auto;box-sizing: border-box;padding: 80px 60px;position: relative;z-index: 1;background: linear-gradient(-45deg, transparent 40px, #ffffff 0) right,linear-gradient(135deg, transparent 40px, #ffffff 0) left;background-size: 50% 100%;background-repeat: no-repeat;filter: drop-shadow(0 5px 10px rgba(0, 0, 0, 0.3));}
.cut h3{font-size: 36px;color: #222222;padding-bottom: 20px;border-bottom: 1px solid #dddddd;margin-bottom: 20px;text-transform: uppercase;}
.cut h4{font-size: 24px;color: #222222;margin-bottom: 20px;}
.cut p{font-size: 16px;color: #666666;line-height: 30px;position: relative;margin-bottom: 10px;}