Web前端之Css实现缺角功能、clipPath属性、形状、渐变、旋转、矩形、边框、折角

---

1、缺角矩形

使用css3渐变实现缺角矩形，关于linear-gradient属性的介绍请移步至MDN。

---

<div class="rectangle_box">
    <div class="left_top"></div>

    <div class="right_top"></div>

    <div class="right_bottom"></div>

    <div class="left_bottom"></div>

    <div class="quadrangle"></div>

    <div class="two_corners"></div>

    <div class="arc_corners"></div>
</div>

---

body {
    margin: 0;
    padding: 0;
    height: 100vh;
}

.rectangle_box {
    height: 100%;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

.rectangle_box>div {
    width: 168px;
    height: 130px;
}

/* 左上角 */
.left_top {
    background: linear-gradient(135deg, transparent 20px, #2baaca 0);
}

/* 右上角 */
.right_top {
    background: linear-gradient(-135deg, transparent 20px, #2baaca 0);
}

/* 右下角 */
.right_bottom {
    background: linear-gradient(-45deg, transparent 20px, #2baaca 0);
}

/* 左下角 */
.left_bottom {
    background: linear-gradient(45deg, transparent 20px, #2baaca 0);
}

/* 四个角 */
.quadrangle {
    background: linear-gradient(135deg, transparent 20px, #2baaca 0) top left,
        linear-gradient(-135deg, transparent 20px, #2baaca 0) top right,
        linear-gradient(-45deg, transparent 20px, #2baaca 0) bottom right,
        linear-gradient(45deg, transparent 20px, #2baaca 0) bottom left;
    background-size: 50% 50%;
    background-repeat: no-repeat;
}

/* 上两角 */
.two_corners {
    background: linear-gradient(135deg, transparent 20px, #2baaca 0) top left,
        linear-gradient(-135deg, transparent 20px, #2baaca 0) top right,
        linear-gradient(-45deg, transparent 0, #2baaca 0) bottom right,
        linear-gradient(45deg, transparent 0, #2baaca 0) bottom left;
    background-size: 50% 50%;
    background-repeat: no-repeat;
}

/* 弧形角 */
.arc_corners {
    background: radial-gradient(circle at top left, transparent 20px, #2baaca 0) top left,
        radial-gradient(circle at top right, transparent 20px, #2baaca 0) top right,
        radial-gradient(circle at bottom right, transparent 20px, #2baaca 0) bottom right,
        radial-gradient(circle at bottom left, transparent 20px, #2baaca 0) bottom left;
    background-size: 50% 50%;
    background-repeat: no-repeat;
}

---

2、缺角边框

使用两个缺角矩形叠加。

---

<div class="border_box">
    <div></div>
</div>

---

body {
    margin: 0;
    padding: 0;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.border_box {
    width: 360px;
    height: 130px;
    padding: 4px;
    background: linear-gradient(135deg, transparent 20px, #2baaca 0);
}

.border_box>div {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, transparent 19px, #ffffff 0);
}

---

3、折角矩形

在缺角矩形的基础上多了一个折角。

---

<div class="angled_box">
    <div class="angled_45"></div>

    <div class="angled_35"></div>
</div>

---

body {
    margin: 0;
    padding: 0;
}

.angled_box {
    height: 100vh;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

.angled_box>div {
    width: 168px;
    height: 130px;
}

/* 45度折角 */
.angled_45 {
    background: linear-gradient(to left bottom, transparent 50%, rgba(0, 0, 0, 0.4) 0) no-repeat 100% 0 / 1.4rem 1.4rem,
        linear-gradient(-135deg, transparent 1rem, #2baaca 0);
}

/* 35度折角 */
.angled_35 {
    background: linear-gradient(-150deg, transparent 1rem, #2baaca 0);
    border-radius: .3em;
    position: relative;
}

.angled_35::before {
    content: '';
    position: absolute;
    right: 0;
    top: -0.85rem;
    width: 1.15em;
    height: 2em;
    background: linear-gradient(to left bottom, transparent 50%, rgba(0, 0, 0, 0.3) 0, rgba(0, 0, 0, 0.4)) 100% 0 no-repeat;
    transform: rotate(-30deg);
    /* 让三角形的右下角成为旋转的中心 */
    transform-origin: bottom right;
    box-shadow: -.2em .2em .3em -.1em rgba(0, 0, 0, .15);
    /* 左下角继承border-radius */
    border-bottom-left-radius: inherit;
}

---

4、clip-path属性

clip-path可以创建一个只显示元素部分区域的剪切区域。区域内的部分显示，区域外的隐藏。

---

<div class="clip_path_box">
    <div class="path_1"></div>

    <div class="path_2"></div>
</div>

---

body {
    margin: 0;
    padding: 0;
}

.clip_path_box {
    height: 100vh;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

.clip_path_box>div {
    width: 186px;
    height: 130px;
}

.path_1 {
    background-image: url('../image/13_1101.jpg');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    clip-path: polygon(15px 0, calc(100% - 15px) 0,
            100% 15px, 100% calc(100% - 15px),
            calc(100% - 15px) 100%, 15px 100%,
            0 calc(100% - 15px), 0 15px);
}

.path_2 {
    width: 120px;
    height: 80px;
    background: #2baaca;
    /*clip-path: inset(25% 0 25% 0 round 0 25% 0 25%);*/
    clip-path: inset(0 round 0 25%);
    /* 可以简写 */
    /* inset(<top> <right> <bottom> <left> round <top-radius> 
    <right-radius> <bottom-radius> <left-radius>) */
    /* inset使用四个值（对应“上 右 下 左”的顺序）来设置圆角半径。 */
}