CSS样式斜切边

2023-12-25 17:34:39

html部分

?<div class="rectangle"></div>

样式一：

? ? ? ? .rectangle {

? ? ? ? ? ? width: 251px;

? ? ? ? ? ? height: 75px;

? ? ? ? ? ? background:

? ? ? ? ? ? ? ? linear-gradient(-135deg, transparent 52px, #ffffff 0) top right;

? ? ? ? ? ? background-size: 100% 100%;

? ? ? ? ? ? background-repeat: no-repeat;

? ? ? ? ? ? background-color: bisque;

? ? ? ? }

样式二：

? ? ? ? .rectangle {

? ? ? ? ? ? width: 251px;

? ? ? ? ? ? height: 150px;

? ? ? ? ? ? background:

? ? ? ? ? ? ? ? linear-gradient(-135deg, transparent 52px, #ffffff 0) top right;

? ? ? ? ? ? background-size: 100% 100%;

? ? ? ? ? ? background-repeat: no-repeat;

? ? ? ? ? ? background-color: bisque;

? ? ? ? }

样式三：

? ? ? ? .rectangle {

? ? ? ? ? ? width: 305px;

? ? ? ? ? ? height: 75px;

? ? ? ? ? ? background:

? ? ? ? ? ? ? ? linear-gradient(-45deg, transparent 52px, #ffffff 0) bottom right,

? ? ? ? ? ? ? ? linear-gradient(-135deg, transparent 52px, #ffffff 0) top right;

? ? ? ? ? ? background-size: 100% 100%;

? ? ? ? ? ? background-repeat: no-repeat;

? ? ? ? }

样式四：

? ? ? ? .rectangle {

? ? ? ? ? ? width: 305px;

? ? ? ? ? ? height: 75px;

? ? ? ? ? ? background:

? ? ? ? ? ? ? ? linear-gradient(135deg, transparent 52px, #ffffff 0) top left,

? ? ? ? ? ? ? ? linear-gradient(45deg, transparent 52px, #ffffff 0) bottom left,

? ? ? ? ? ? ? ? linear-gradient(-45deg, transparent 52px, #ffffff 0) bottom right,

? ? ? ? ? ? ? ? linear-gradient(-135deg, transparent 52px, #ffffff 0) top right;

? ? ? ? ? ? background-size: 50% 50%;

? ? ? ? ? ? background-repeat: no-repeat;

? ? ? ? }

样式五：

? ? ? ? .rectangle {

? ? ? ? ? ? width: 305px;

? ? ? ? ? ? height: 75px;

? ? ? ? ? ? background:

? ? ? ? ? ? ? ? linear-gradient(135deg, transparent 0px, #ffffff 0) top left,

? ? ? ? ? ? ? ? linear-gradient(45deg, transparent 0px, #ffffff 0) bottom left,

? ? ? ? ? ? ? ? linear-gradient(-45deg, transparent 52px, #ffffff 0) bottom right,

? ? ? ? ? ? ? ? linear-gradient(-135deg, transparent 52px, #ffffff 0) top right;

? ? ? ? ? ? background-size: 50% 50%;

? ? ? ? ? ? background-repeat: no-repeat;

? ? ? ? }

样式六：

? ? ? ? .rectangle {

? ? ? ? ? ? width: 305px;

? ? ? ? ? ? height: 305px;

? ? ? ? ? ? background:

? ? ? ? ? ? ? ? linear-gradient(135deg, transparent 52px, #ffffff 0) top left,

? ? ? ? ? ? ? ? linear-gradient(45deg, transparent 52px, #ffffff 0) bottom left,

? ? ? ? ? ? ? ? linear-gradient(-45deg, transparent 52px, #ffffff 0) bottom right,

? ? ? ? ? ? ? ? linear-gradient(-135deg, transparent 52px, #ffffff 0) top right;

? ? ? ? ? ? background-size: 50% 50%;

? ? ? ? ? ? background-repeat: no-repeat;

? ? ? ? }

样式六：

?.rectangle {

? ? ? ? ? ? width: 305px;

? ? ? ? ? ? height: 305px;

? ? ? ? ? ? background:

? ? ? ? ? ? ? ? linear-gradient(135deg, transparent 52px, #e93030 150px) top left,

? ? ? ? ? ? ? ? linear-gradient(45deg, transparent 52px, #e93030 150px) bottom left,

? ? ? ? ? ? ? ? linear-gradient(-45deg, transparent 52px, #e93030 150px) bottom right,

? ? ? ? ? ? ? ? linear-gradient(-135deg, transparent 52px, #e93030 150px) top right;

? ? ? ? ? ? background-size: 50% 50%;

? ? ? ? ? ? background-repeat: no-repeat;

? ? ? ? }

样式七：

? ? ? ? .rectangle {

? ? ? ? ? ? width: 305px;

? ? ? ? ? ? height: 305px;

? ? ? ? ? ? background:

? ? ? ? ? ? ? ? linear-gradient(135deg, #e93030 150px, transparent 52px) top left,

? ? ? ? ? ? ? ? linear-gradient(45deg, ?#e93030 150px, transparent 52px) bottom left,

? ? ? ? ? ? ? ? linear-gradient(-45deg, ?#e93030 150px, transparent 52px) bottom right,

? ? ? ? ? ? ? ? linear-gradient(-135deg, ?#e93030 150px, transparent 52px) top right;

? ? ? ? ? ? background-size: 50% 50%;

? ? ? ? ? ? background-repeat: no-repeat;

? ? ? ? }

样式七 ：

? ? ? ? .rectangle {

? ? ? ? ? ? width: 305px;

? ? ? ? ? ? height: 305px;

? ? ? ? ? ? background:

? ? ? ? ? ? ? ? linear-gradient(135deg, transparent 52px, #ffffff 0,transparent 81px,#ffffff 0,transparent 107px,#ffffff 0) top left,

? ? ? ? ? ? ? ? linear-gradient(45deg, transparent 52px, #ffffff 0,transparent 81px,#ffffff 0,transparent 107px,#ffffff 0) bottom left,

? ? ? ? ? ? ? ? linear-gradient(-45deg, transparent 52px, #ffffff 0,transparent 81px,#ffffff 0,transparent 107px,#ffffff 0) bottom right,

? ? ? ? ? ? ? ? linear-gradient(-135deg, transparent 52px, #ffffff 0,transparent 81px,#ffffff 0,transparent 107px,#ffffff 0) top right;

? ? ? ? ? ? background-size: 50% 50%;

? ? ? ? ? ? background-repeat: no-repeat;

? ? ? ? }

文章来源:https://blog.csdn.net/weixin_44481113/article/details/135197814
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。