Html
    Css
    Js


.rantangle {
	width:100%;
	box-sizing:border-box;
	text-align:center;
}
.rantangle button {
	width:20%;
	border:0;
	border-radius:5px;
	color:#FFF;
	padding:10px 0;
	text-align:center;
	text-decoration:none;
	cursor:pointer;
}
.btnleft {
	background:linear-gradient(-59deg,transparent 21px,#d12826 0) top right;
	background-size:100% 100%;
	background-repeat:no-repeat;
}
.btnright {
	background:linear-gradient(120deg,transparent 21px,#04A95B 0) top left;
	background-size:100% 100%;
	background-repeat:no-repeat;
	margin-left:-25px;
}

↑上面代码改变,会自动显示代码结果 jQuery调用版本:2.1.4
 立即下载

css button斜切角

更新时间:2019-10-07 13:52:01

background: linear-gradient(-59deg, transparent 21px, #d12826 0) top right;

-59deg:旋转角度,控制切角的方向。

transparent 21px  :从哪里开始切。

0