css 简单的图形绘制

废话开篇：简单记录下一些图形绘制

一、开始

.special_shape_1 {
    width: 20%;
    height: 65px;
    border-radius: 3px;
    filter: drop-shadow(1px 1px 4px darkgray);
    background: 
    radial-gradient(circle at 30% 0,transparent 0 ,transparent 12px ,lightgreen 12px),
    radial-gradient(circle at 30% 100%,transparent 0 ,transparent 12px ,lightgreen 12px);
    background-size:100% 50%,100% 50%;
    background-position:30% 0,30% 100%;
    background-repeat: no-repeat,no-repeat;
}

.special_shape_2 {
    width: 20%;
    height: 65px;
    border-radius: 3px;
    filter: drop-shadow(1px 1px 4px darkgray);
    background: 
    linear-gradient(#666 0%,#666 35%,transparent 35%,transparent 100%),
    radial-gradient(circle at 30% 0,transparent 0 ,transparent 12px ,yellowgreen 12px),
    radial-gradient(circle at 30% 100%,transparent 0 ,transparent 12px ,yellowgreen 12px);
    background-size:1px 10px,100% 50%,100% 50%;
    background-position:40% 0, 30% 0,30% 100%;
    background-repeat:repeat-y,no-repeat,no-repeat;
}

.special_shape_3 {
    width: 20%;
    height: 65px;
    background-color: gold;
    clip-path: polygon(
    0 0,
    calc(100% - 65px) 0,
    100% 100%,
    0 100%
    );
}

.special_shape_4 {
    width: 20%;
    height: 65px;
    filter: drop-shadow(1px 1px 5px darkgray);
    background: linear-gradient(-135deg,transparent 46px,lightblue 0px) top right;
}

.special_shape_5 {
    width: 20%;
    height: 65px;
    background-color: pink;
    clip-path: polygon(
    65px 0,
    calc(100% - 65px) 0,
    100% 100%,
    0 100%
    );
}

.special_shape_6 {
    width: 20%;
    height: 65px;
    background-color: lightgreen;
    clip-path: polygon(
    50% 0,
    100% 100%,
    0 100%
    );
}

.special_shape_7 {
    width: 20%;
    height: 75px;
    background: linear-gradient(burlywood,burlywood),linear-gradient(burlywood,burlywood);
    background-repeat: no-repeat;
    background-position: 0px 15px,15px 0;
    background-size: calc(100%) calc(100% - 30px),calc(100% - 30px) calc(100%);
}

.special_shape_8 {
    width: 20%;
    height: 75px;
    background:
    radial-gradient(circle at 15px 15px,green 0 ,green 15px,transparent 15px),
    radial-gradient(circle at 15px 15px,green 0 ,green 15px,transparent 15px),
    radial-gradient(circle at 15px 15px,green 0 ,green 15px,transparent 15px),
    radial-gradient(circle at 15px 15px,green 0 ,green 15px,transparent 15px),
    linear-gradient(green,green),
    linear-gradient(green,green);
    background-repeat: no-repeat;
    background-position:
    0px 15px,
    100% 15px,
    0px 100%,
    100% 100%,
    0px 30px,
    15px 0;
    background-size:
    30px 30px,
    30px 30px,
    30px 30px,
    30px 30px,
    calc(100%) calc(100% - 45px),
    calc(100% - 30px) calc(100%);
    clip-path: polygon(
    0 15px,
    calc(70% - 10px) 15px,
    70% 0,
    calc(70% + 10px) 15px,
    100% 15px,
    100% 100%,
    0 100%
    );
}

.special_shape_9 {
    width: 0px;
    position: relative;
    border-left: solid 50px transparent;
    border-top: solid 50px red;
}

.special_shape_10 {
    width: 0px;
    position: relative;
    border-left: solid 50px blue;
    border-top: solid 50px transparent;
}

.dotted_line_1 {
    background-image: linear-gradient(to right ,#000 30%, rgba(255,255,255,0) 0%);
    background-position: bottom;
    background-size: 10px 1px;
    background-repeat: repeat-x;
}

.dotted_line_2 {
    background-image: linear-gradient(#000 0%,#000 35%,transparent 35%,transparent 100%);
    background-repeat: repeat-y;
    background-size: 1px 10%;
    background-position: left;
}

.dotted_line_3 {
    background: 
    linear-gradient(#fff,#fff),
    repeating-linear-gradient(45deg,#000 0%,#000 2%,#fff 2%,#fff 4%);
    background-repeat: no-repeat;
    background-position: 1px 1px,0 0;
    background-size: calc(100% - 2px) calc(100% - 2px),100% 100%;
}

.dotted_line_4 {
    background-image: 
    linear-gradient(#000 0%,#000 35%,transparent 35%,transparent 100%),
    linear-gradient(#000 0%,#000 35%,transparent 35%,transparent 100%),
    linear-gradient(to right ,#000 30%, rgba(255,255,255,0) 0%),
    linear-gradient(to right ,#000 30%, rgba(255,255,255,0) 0%);
    background-repeat: repeat-y,repeat-y,repeat-x,repeat-x;
    background-size: 1px 10px,1px 10px,10px 1px,10px 1px;
    background-position: left ,right,bottom,top;
}

二、小刀

<div class="knife">
    <div class="knife_blade"></div>
    <div class="knife_handle"></div>
</div>

.knife {
    width: 100%;
    margin-bottom: 150px;
    padding-bottom: 100px;
    position: relative;
}

.knife > div {
    margin-top: 30px;
    margin-left: auto;
    margin-right: auto;
}

.knife_blade {
    width: 20%;
    height: 56px;
    position: absolute;
    top: 60px;
    left: calc(40% + 10px);
    background-color: rgb(184, 183, 180);
    transform: rotateZ(-45deg);
    transform-origin: 18px 18px;
    clip-path: polygon(
    0 0,
    calc(100% - 65px) 0,
    100% 100%,
    0 100%
    );
}

.knife_handle {
    position: absolute;
    top: 60px;
    left: 40%;
    width: 20%;
    height: 56px;
    background:
    radial-gradient(circle at 10px 10px,white 0,white 10px,rgb(72, 6, 6) 10px),
    radial-gradient(circle at 28px 0px,white 0,white 28px,rgb(72, 6, 6) 20px),
    radial-gradient(circle at 0 28px,rgb(72, 6, 6) 0,rgb(72, 6, 6) 28px,transparent 28px),
    radial-gradient(circle at 28px 28px,rgb(72, 6, 6) 0,rgb(72, 6, 6) 28px,transparent 28px),
    linear-gradient(rgb(72, 6, 6),rgb(72, 6, 6))
    ;
    background-position:
    18px 18px,
    calc(100% - 50px) 0px,
    100% 0px,
    0px 0px,
    28px 0px;
    background-repeat: no-repeat;
    background-size:
    20px 20px,
    56px 28px,
    28px 56px,
    28px 56px,
    calc(100% - 56px) 56px;
}

三、思考与总结

没有什么特别复杂的东西，记录一下绘制过程中的一些属性，希望对大家有所帮助，代码拙劣，大神勿笑[抱拳][抱拳][抱拳]