css border相关深入

通过border样式画出各种形状

   <style>
        .box1 {
            width: 0;
            height: 0;
            border-top: 20px solid red;
            border-right: 20px solid blue;
            border-bottom: 20px solid yellow;
            border-left: 50px solid green;
            /* 通过不同边的尺寸改变，可以形成任意形状的三角形，如果需要一边的三角形，其他边不能消失，只能设置透明度，这样才能把其他方向撑起来 */
        }
        .box2 {
            width: 0;
            height: 0;
            border-top: 20px solid transparent;
            border-right: 20px solid transparent;
            border-bottom: 20px solid transparent;
            border-left: 50px solid green;
            /* transform: rotate(-90deg); */
            /* 通过旋转改变当前三角形的方向 */
        }
        /* 直角三角形 */
        .box3 {
            width: 0;
            height: 0;
            border-top: 0px solid red;
            border-right: 0px solid transparent;
            border-bottom: 40px solid yellow;
            border-left: 20px solid transparent;
            /* border-width: ; */
        }
        /* 梯形 = 矩形 + 直角三角形 */
        .box4 {
            position: relative;
            width: 40px;
            height: 20px;
            background-color: red;
        }
        .box4 i {
            position: absolute;
            right: 0;
            width: 0;
            height: 0;
            border-width: 0px 10px 20px 0px;
            border-style: solid;
            border-color: transparent #fff transparent transparent;
        }
        /* 五角星 = 三个三角形 */
        .box5 {
            position: relative;
            margin-top: 30px;
            margin-left: 30px;
            width: 0;
            height: 0;
            border-top: 0px solid transparent;
            border-right: 20px solid transparent;
            border-bottom: 14px solid yellow;
            border-left: 20px solid transparent;
            transform: rotate(45deg);
        }
        .box5::before {
            content: "";
            position: absolute;
            left: -20px;
            top: 0;
            border-top: 0px solid transparent;
            border-right: 20px solid transparent;
            border-bottom: 14px solid blue;
            border-left: 20px solid transparent;
            transform: rotate(70deg);
        }
        .box5::after {
            content: "";
            position: absolute;
            left: -20px;
            top: 0;
            border-top: 0px solid transparent;
            border-right: 20px solid transparent;
            border-bottom: 14px solid red;
            border-left: 20px solid transparent;
            transform: rotate(142deg);
        }
        
    </style>

html

 <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4">
        <i></i>
    </div>
    <div class="box5"></div>

通过边框阴影box-shadow 不同阴影

 .box {
            width: 200px;
            height: 100px;
            text-align: center;
            margin: 100px auto;
            position: relative;

        }

        .box1 {
            box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0px 40px rgba(0, 0, 0, 0.1) inset;
        }

        /* .box1::after {
            content: "";
            position: absolute;
            background: transparent;
            top: 50%;
            bottom: 1px;
            left: 10px;
            right: 10px;
            z-index: -1;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.7);
            border-radius: 100px/10px;
        } */

        .box2 {
            position: relative;
            box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
            *zoom: 1;

        }

        .box2:before,
        .box2:after {
            content: "";
            position: absolute;
            top: 20px;
            bottom: 22px;
            background: transparent;
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.7);
            z-index: -11;
            background: #fff;
        }

        .box2:before {
            left: 22px;
            right: 12px;
            transform: skew(-12deg) rotate(-4deg);
        }

        .box2:after {
            left: 12px;
            right: 22px;
            transform: skew(12deg) rotate(4deg);
        }

        .box3 {
            text-align: center;
            display: inline-block;
            *display: inline;
            width: 200px;
            height: 100px;
            margin: 20px;
            background-color: #fff;
            border: 1px solid #eee;
            -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 60px rgba(0, 0, 0, 0.06) inset;
            -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
            box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
            position: relative;
            *zoom: 1;
        }

        .box3:before {
            -webkit-transform: skew(-15deg) rotate(-6deg);
            -moz-transform: skew(-15deg) rotate(-6deg);
            transform: skew(-15deg) rotate(-6deg);
        }

        .box3:after {
            -webkit-transform: skew(15deg) rotate(6deg);
            -moz-transform: skew(15deg) rotate(6deg);
            transform: skew(15deg) rotate(6deg);   
        }

        .box3:before,
        .box3:after {
            content: ' ';
            -webkit-box-shadow: 0 8px 18px rgba(0, 0, 0, 0.6);
            -moz-box-shadow: 0 8px 18px rgba(0, 0, 0, 0.6);
            box-shadow: 0 8px 18px rgba(0, 0, 0, 0.6);
            position: absolute;
            bottom: 10px;
            right: 15px;
            top: 6px;
            left: 6px;
            z-index: -1;
            /* background-color: #cccccc; */

        }

<div class="box box1">曲边阴影</div>
    <div class="box box2">曲边阴影</div>
    <div class="box3">
        翘边阴影
    </div>

效果图：

1614477379(1).jpg