CSS 画图小技巧

原文地址://www.greatytc.com/p/ff88f6823873
1 边框内圆角
CSS代码

#wrapper {
    width: 200px;
    height: 80px;
    padding: 10px;
    background: rgb(255, 187, 51);
    #content {
        display: flex; //下面的水平居中 与 垂直居中 都是在这个的前提下 才有效果
        justify-content: center; //内容水平居中
        align-items: center;//内容垂直居中
        height: 100%;
        background: rgb(85, 136, 187);
        color: #fff;
        font-size: 14px;
        border-radius: 20px;
    }
}

html

<div id="wrapper">
  <div id = "content">
    content
  </div>
</div>

效果图

aaa.jpg

使用 box-shadow 和 outline 实现类似的效果
css 代码

#wrapper{
        width: 200px;
        height:80px;
        padding: 10px;
        display: flex; 
        justify-content: center; 
        align-items: center;
        background: rgb(85, 136, 187);
        color: #fff;
        font-size: 14px;
        border-radius: 20px;
        box-shadow: 0 0 0 10px rgb(255, 187, 51);//box-shadow 会沿着图形周边添加
        outline: 10px solid rgb(255, 187, 51);//outline 不跟随图形的边 进行描边
}

2 条纹背景
效果图

tw.jpg

css 代码

#stripe {
  width: 400px;
  height: 200px;
  background: linear-gradient(rgb(255, 187, 51) 50%, rgb(85, 136, 187) 50%);
  background-size: 100% 50px;
}

多条纹(同一个颜色有个开始点有个结束点)

#stripe {
  width: 400px;
  height: 200px;
  background: linear-gradient(
    rgb(255, 187, 51) 0, 
    rgb(255, 187, 51) 33.3%, 
    rgb(85, 136, 187) 33.3%, 
    rgb(85, 136, 187) 66.6%, 
    rgb(170, 255, 0) 66.6%,
    rgb(170, 255, 0) 100%
  );
  background-size: 100% 50px;
}

dtw.jpg

斜条纹
CSS代码

#stripe {
  width: 400px;
  height: 400px;
  background: linear-gradient(45deg, 
    rgb(255, 187, 51) 0%, 
    rgb(255, 187, 51) 30%, 
    rgb(85, 136, 187) 0, 
    rgb(85, 136, 187) 50%,
    rgb(255, 187, 51) 50%,
    rgb(255, 187, 51) 80%,
    rgb(85, 136, 187) 80%
);
  background-size: 50px 50px;
}

效果图

image.png

斜条纹每个CSS绘制的只是一个50*50 的小方块要想把小方块叠加成斜条纹需要根据想要的效果合理设置百分比

3 平行四边形和梯形
平行四边形
CSS代码

#content {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 200px;
    height: 80px;
    margin-left:100px;
    background: rgb(85, 136, 187);
    color: #fff;
    font-size: 14px;
    transform: skewX(-30deg);
    span {
        transform: skewX(30deg);
    }
}

使用transform实现平行四边形效果

image.png

使用伪元素实现平行四边形的背景
css代码

#content {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 120px;
    height: 60px;
    font-size: 18px;
    font-weight: 600;
    color: #fff;

    &::after {
        content: '';
        position: absolute;//使用绝对定位把 伪元素 放到div 下面
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        transform: skewX(-30deg);
        background: rgb(85, 136, 187);
        z-index: -1;
    }
}

梯形
CSS代码

.trapezoid {
    position: relative;
    left: 200px;
    width: 400px;
    height: 180px;
    background: rgb(85, 136, 170);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 48px;
    color: rgb(255, 255, 255);

    &::before,
    &::after {
        content: '';
        position: absolute;
    }

    &::before {
        position: absolute;
        top: 0;
        left: -100px;
        width: 0;
        height: 0;
        border-top: 180px solid transparent;
        border-bottom: 0 solid transparent;
        border-right: 100px solid rgb(255, 187, 51);
    }

    &::after {
        position: absolute;
        top: 0;
        right: -240px;
        width: 0;
        height: 0;
        border-top: 180px solid transparent;
        border-bottom: 0 solid transparent;
        border-left: 240px solid rgb(255, 187, 51);
    }
}

效果图

image.png

3d 平面变形实现相同的效果

.trapezoid {
    position: relative;
    left: 200px;
    width: 400px;
    height: 180px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 48px;
    color: rgb(255, 255, 255);
    &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgb(85, 136, 170);
        transform: perspective(200px) rotateX(30deg);
        z-index: -1;
    }
}

效果图

image.png

4 阴影
实现图片的阴影
CSS代码

#logo {
    position: relative;
    width: 200px;
    height: 200px;
    background: url('../img/logo.svg') no-repeat;
    &::after {
        content: '';
        position: absolute;
        top: 40px;
        left: 0;
        width: 100%;
        height: 100%;
        background: url('../img/logo.svg') no-repeat;
        background-size: 100% 100%;
        filter: blur(10px)
    }
}

CSS 画图小技巧

推荐阅读更多精彩内容