站在 CSS 大佬的肩上画图形（合集）

古城微笑少年丶 2022-10-07 07:54 123阅读 0赞

点击上方 前端瓶子君，关注公众号

回复算法，加入前端编程面试算法每日一题群

#### 1、边框内圆角 ####

> 有时我们需要一个容器，只在内侧有圆角，而边框或描边的四个角在外部仍然保持直角的形状，最普遍就是用两个元素来实现这个效果，现在介绍一下用一个元素来实现。

// HTML
    <div class="elemt"></div>
    
    // CSS
    .elemt{
      width: 150px;
      height: 150px;
      box-shadow: 0 0 0 12px #655;
      background: tan;
      outline: 6px solid #655;
      border-radius: 6px;
    }
    复制代码

**效果如下：**

![1d95141df9a46aaafff8e87dc2755bfc.png][] WeCom Screenshot\_20210602144904.png

#### 2、各种条纹背景 ####

##### 2.1 横向和纵向条纹 #####

// HTML
    <div class="elemt"></div>
    
    // CSS
    /* 横向 */
    .elemt {
        width: 300px;
        height: 300px;
        background: linear-gradient(#fb3 50%, #58a 0);
        background-size: 100% 30px;
    }
    
    /* 纵向 */
    .elemt {
        width: 300px;
        height: 300px;
        background: linear-gradient(90deg, #fb3 50%, #58a 0);
        background-size: 30px 100%;
    }
    复制代码

**效果如下：**

![74db9dbd3256ed1ae8c7e8cbaa19c7f6.png][] WeCom Screenshot\_20210602144904.png

##### 2.2 斜向条纹 #####

// HTML
    <div class="elemt"></div>
    
    // CSS
    /* 斜向 */
    .elemt {
        width: 300px;
        height: 300px;
        background: linear-gradient(45deg, #fb3 25%, #58a 0, #58a 50%, #fb3 0, #fb3 75%, #58a 0);
        background-size: 42.4px 42.4px;
    }
    复制代码

**效果如下：**

![3558ade9a7edbe56607f08911c20a4c5.png][] WeCom Screenshot\_20210602144904.png

##### 2.3 网格背景 #####

// HTML
    <div class="elemt"></div>
    
    // CSS
    .elemt {
        width: 300px;
        height: 300px;
        background: #58a;
        background-image: linear-gradient(white 2px, transparent 0),
          linear-gradient(90deg, white 2px, transparent 0),
          linear-gradient(hsla(0, 0%, 100%, .3) 1px, transparent 0),
          linear-gradient(90deg, hsla(0, 0%, 100%, .3) 1px, transparent 0);
        background-size: 50px 50px, 50px 50px,
          10px 10px, 10px 10px;
    }
    复制代码

**效果如下：**

![48f23a4441a9f5531aa4ae30f3fc6c6e.png][] WeCom Screenshot\_20210602144904.png

##### 2.3 波点背景 #####

// HTML
    <div class="elemt"></div>
    
    // CSS
    .elemt {
        width: 300px;
        height: 300px;
        background: repeating-linear-gradient(60deg, #fb3, #fb3 15px, #58a 0, #58a 30px);
        background: #655;
        background-image: radial-gradient(tan 20%, transparent 0),
          radial-gradient(tan 20%, transparent 0);
        background-size: 30px 30px;
        background-position: 0 0, 15px 15px;
    }
    复制代码

**效果如下：**

![01b496f1f033c9041a624085eb7104b9.png][] WeCom Screenshot\_20210602144904.png

##### 2.4 棋盘背景 #####

// HTML
    <div class="elemt"></div>
    
    // CSS
    /* 方案一 */
    .elemt {
        width: 300px;
        height: 300px;
        background: #eee;
        background-image: linear-gradient(45deg, rgba(0, 0, 0, .25) 25%, transparent 0, transparent 75%, rgba(0, 0, 0, .25) 0),
          linear-gradient(45deg, rgba(0, 0, 0, .25) 25%, transparent 0, transparent 75%, rgba(0, 0, 0, .25) 0);
        background-position: 0 0, 15px 15px;
        background-size: 30px 30px;
    }
    
    /* 方案二 */
    .elemt {
        width: 300px;
        height: 300px;
        background: #eee url('data:image/svg+xml,\
                <svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" fill-opacity=".25" >\
                <rect x="50" width="50" height="50" />\
                <rect y="50" width="50" height="50" />\
                </svg>');
        background-size: 30px 30px;
    }
    复制代码

**效果如下：**

![01694758cbcbe7f7aefea3526a3266fb.png][] WeCom Screenshot\_20210602144904.png

#### 3、“老式信封”边框样式 ####

// HTML
    <div class="elemt"></div>
    
    // CSS
    /* 方案一 */
    .elemt{
        width: 300px;
        height: 300px;
        border: 1em solid transparent;
        background: linear-gradient(white, white) padding-box,
          repeating-linear-gradient(-45deg, red 0, red 12.5%, transparent 0, transparent 25%,
            #58a 0, #58a 37.5%, transparent 0, transparent 50%) 0 / 6em 6em;
    }
    
    /* 方案二 */
    .elemt{
        width: 300px;
        height: 300px;
        border: 1em solid transparent;
        border-image: 16 repeating-linear-gradient(-45deg, red 0, red 1em, transparent 0, transparent 2em,
            #58a 0, #58a 3em, transparent 0, transparent 4em);
    }
    复制代码

**效果如下：**

![c936826026516551e2db1a67f765d46f.png][] WeCom Screenshot\_20210602144904.png

#### 4、 圆、椭圆 ####

> 将元素的宽高设置不相等，就会得到椭圆

// HTML 
    <div class="elemt"></div>
    
    // CSS ------ 圆
    .elemt{
        width: 16em;
        height: 16em;
        background: #fb3;
        border-radius: 50%;
    }
    
    // CSS ------ 椭圆
    .elemt{
        width: 16em;
        height: 10em;
        background: #fb3;
        border-radius: 50%;
    }
    复制代码

**效果如下：**  
![1176016c3bd09e1c6a5e7f02f3c7f3cb.png][]

#### 5、 半椭圆 ####

// HTML 
    <div class="elemt"></div>
    <div class="elemt"></div>
    <div class="elemt"></div>
    <div class="elemt"></div>
    
    // CSS
    .elemt{
        width: 16em;
        height: 16em;
        margin: 1em;
        background: #fb3;
        border-radius: 50% / 100% 100% 0 0;
        display: inline-block;
    }
    
    .elemt:nth-of-type(2) { border-radius: 50% / 0 0 100% 100%; }
    .elemt:nth-of-type(3) { border-radius: 100% 0 0 100% / 50%; }
    .elemt:nth-of-type(4) { border-radius: 0 100% 100% 0 / 50%; }
    复制代码

效果如下：

![e23522849d017977233fa168c1b67c86.png][] WeCom Screenshot\_20210525140935.png

#### 6、 四分一椭圆 ####

// HTML 
    <div class="elemt"></div>
    <div class="elemt"></div>
    <div class="elemt"></div>
    <div class="elemt"></div>
    
    // CSS
    .elemt{
        width: 16em;
        height: 16em;
        margin: 1em;
        background: #fb3;
        border-radius: 100% 0 0 0;
        display: inline-block;
    }
    
    .elemt:nth-of-type(2) { border-radius: 0 100% 0 0; }
    .elemt:nth-of-type(3) { border-radius: 0 0 100% 0; }
    .elemt:nth-of-type(4) { border-radius: 0 0 0 100%; }
    复制代码

**效果如下：**

![fe7564a20f5d4d68d90fafc8d11d6e2b.png][] WeCom Screenshot\_20210525140935.png

#### 7、 平行四边形 ####

> 下面是用伪元素，也可用嵌套元素来实现

// HTML
    <div class="elemt"></div>
    
    // CSS
    .elemt{
        position: relative;
        width: 16em;
        height: 16em;
        background: transparent;
    }
    
    .elemt::before{
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: #58a;
        transform: skew(-45deg);
    }
    复制代码

**效果如下：**

![37f95011f02080c8c319a539204d7ca8.png][] WeCom Screenshot\_20210525140935.png

#### 8、菱形 ####

> 可以用transform: rotare(45deg)来实现，今天介绍一下更简便的方法，就是应用clip-path这个属性。

//HTML
    <div class="elemt"></div>
    
    //CSS
    .elemt{
        width: 250px;
        height: 250px;
        background: #58a;
        clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
    }
    复制代码

**效果如下：**

![579d44fe988bea57de8994b7a3859f83.png][] WeCom Screenshot\_20210525140935.png

#### 9、切角效果 ####

> 面对这个效果，我们首先想到使用三角形盖住元素的顶角来模拟切角效果（当网页背景是纯色时），或者使用一张或多张已经切过角的图片来作为整个元素的背景。但是我们有更简便的方案来实现。

##### 方案一：渐变 #####

// HTML
    <div class="elemt"></div>
    
    // CSS
    .elemt{
        width: 250px;
        height: 250px;
        
        /*直切角*/
        background: linear-gradient(135deg, transparent 15px, #58a 0) top left,
          linear-gradient(-135deg, transparent 15px, #58a 0) top right,
          linear-gradient(45deg, transparent 15px, #58a 0) bottom left,
          linear-gradient(-45deg, transparent 15px, #58a 0) bottom right;
          
        /*圆切角*/
        background: radial-gradient(circle at top left, transparent 15px, #58a 0) top left,
        radial-gradient(circle at top right, transparent 15px, #58a 0) top right,
        radial-gradient(circle at bottom right, transparent 15px, #58a 0) bottom right,
        radial-gradient(circle at bottom left, transparent 15px, #58a 0) bottom left;
        
        background-size: 50% 50%;
        background-repeat: no-repeat;
    }
    复制代码

##### 方案二：裁剪（clip-path） #####

// HTML
    <div class="elemt"></div>
    
    // CSS
    .elemt{
        width: 250px;
        height: 250px;
        background: #58a;
        clip-path: polygon(20px 0, calc(100% - 20px) 0, 100% 20px, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0px 100%, 0 calc(100% - 20px), 0 20px);
    }
    复制代码

**效果如下：**![a292409abd9b7565e6c659d144d5d71a.png][]

#### 10、梯形 ####

// HTML
    <div class="elemt"></div>
    
    // CSS
    .elemt{
        position: relative;
        width: 300px;
        height: 300px;
    }
    
    .elemt::before{
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: #58a;
        transform: scaleY(1.3) perspective(.5em) rotateX(5deg);
        transform-origin: bottom;
    }
    复制代码

**效果如下：**

![85a3df38413b05df3caa25e286392c67.png][] WeCom Screenshot\_20210526113257.png

#### 11、用SVG画一个饼状图 ####

// HTML
    <svg viewBox="0 0 32 32">
      <circle r="16" cx="16" cy="16">
    </svg>
    
    // CSS
    svg{
      width: 100px;
      height: 100px;
      transform: rotate(-90deg);
      background: yellowgreen;
      border-radius: 50%;
    }
    
    circle{
      fill: yellowgreen;
      stroke: #655;
      stroke-width: 32;
      stroke-dasharray: 0 100;
      animation: fillup 5s linear infinite;
    }
    
    @keyframes fillup {
      to{
        stroke-dasharray: 100 100;
      }
    }
    复制代码

**效果如下：**![a6d2de81d2ad42037e8efb0926f434db.gif][]

#### 12、折角效果 ####

// HTML
    <div class="elemt"></div>
    
    // CSS
    .elemt{
        position: relative;
        width: 250px;
        height: 250px;
        margin: 50px;
        background: #58a;
        border-radius: .5em;
        background: linear-gradient(-150deg, transparent 1.5em, #58a 0);
    }
    
    .elemt::before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        width: 1.73em;
        height: 3em;
        background: linear-gradient(to left bottom, transparent 50%, rgba(0, 0, 0, .2) 0, rgba(0, 0, 0, .4)) 100% 0 no-repeat;
        transform: translateY(-1.3em) rotate(-30deg);
        transform-origin: bottom right;
        border-bottom-left-radius: .5em;
        box-shadow: -.2em .2em .3em -.1em rgba(0, 0, 0, .15);
      }
    复制代码

> 但是上面这个方案如果要修改折页的角度的话，则需要修改五处地方，如要更灵活的方案，请点这里，用的是CSS处理器。

**效果如下：**

![acf98db2bbc4741eb1792f5fcb384547.png][] WeCom Screenshot\_20210528113117.png

#### 13、紧贴底部的页脚 ####

> 有一个具有块级样式的页脚（比如它设置了背景或阴影），当页面内容足够长时它一切正常，而当页面较短时（比如错误信息页面）就会出现问题。此时的问题在于，页脚不能像我们期望中那样“紧贴”在视口的最底部，而是紧跟在内容的下方。

// HTMl
    <header></header>
    <main><main>
    <footer></footer>
    
    // CSS
    body {
        display: flex;
        flex-direction: column;
        min-height: 100vh;
    }
    
    main {
        flex: 1;
    }
    复制代码

**具体效果请参考这里**

#### 14、打字动画 ####

// HTML
    <h1>CSS is so awesome!</h1>
    
    // CSS
    h1{
      width: 15ch;
      white-space: nowrap;
      overflow: hidden;
      border-right: .05em solid;
      font: bold 200% Consolas, Monaco, monospace;
      animation: typing 8s steps(15),
                 caret 1s steps(1) infinite;
    }
    
    @keyframes typing{
      from{
        width: 0;
      }
    }
    
    @keyframes caret{
      50%{
        border-right-color: transparent;
      }
    }
    
    // JS
    let text = document.getElementsByTagName('h1');
    text[0].style.width = text[0].outerText.length + 'ch';
    text[0].style.animationTimingFunction = "steps("+ text[0].outerText.length +"), steps(1)";
    复制代码

**效果如下：**

![361f036d554abd44ce5b7f410abfcc6b.gif][] typing.gif

**最后啰嗦一下，最近在看《css揭秘》这本书，顺便总结一下个人觉得不错的地方，方便自己在开发的时候可以偷一下懒，节约一下时间成本。如文中有不正确的地方，请留言提醒一下（请轻喷），如果jio得不错，请xdjmm点个赞鼓励一下，支持一下，感谢各位掘友！书中更多功能效果，请点击这里!：http://play.csssecrets.io/**

**关于本文：**

**来源：Leeon**

**https://juejin.cn/post/6969441630289920008**

## 最后 ##

欢迎关注【前端瓶子君】✿✿ヽ(°▽°)ノ✿

回复「算法」，加入前端编程源码算法群，每日一道面试题（工作日），第二天瓶子君都会很认真的解答哟！

回复「交流」，吹吹水、聊聊技术、吐吐槽！

回复「阅读」，每日刷刷高质量好文！

如果这篇文章对你有帮助，「在看」是最大的支持

》》面试官也在看的算法资料《《

“在看和转发”就是最大的支持

[1d95141df9a46aaafff8e87dc2755bfc.png]: /images/20221005/df822a522f2740538fa0cd95f92d6c7e.png
[74db9dbd3256ed1ae8c7e8cbaa19c7f6.png]: /images/20221005/15c3181a1e29420bb2d0f0f923b696ff.png
[3558ade9a7edbe56607f08911c20a4c5.png]: /images/20221005/b0b17cbb964a48a496fac81c228de110.png
[48f23a4441a9f5531aa4ae30f3fc6c6e.png]: /images/20221005/b1fb81e94986453e9a9a36f66508aca2.png
[01b496f1f033c9041a624085eb7104b9.png]: /images/20221005/6233998ad40b422a9c5bfb1ba98a61ea.png
[01694758cbcbe7f7aefea3526a3266fb.png]: /images/20221005/c799d6ccef0b4039be5049e22547ee27.png
[c936826026516551e2db1a67f765d46f.png]: /images/20221005/b041ba8dd6a346c09a30cf49aed4cd3c.png
[1176016c3bd09e1c6a5e7f02f3c7f3cb.png]: /images/20221005/c65b8ca8cf9f444aad12ec249579a913.png
[e23522849d017977233fa168c1b67c86.png]: /images/20221005/cc7d17d8c272445295b7e69d406fd095.png
[fe7564a20f5d4d68d90fafc8d11d6e2b.png]: /images/20221005/49c259cf406d44c39f25634c23b513da.png
[37f95011f02080c8c319a539204d7ca8.png]: /images/20221005/8a95a4454b724bd1984e4bfe796d5f23.png
[579d44fe988bea57de8994b7a3859f83.png]: /images/20221005/5f39bd5cb6c743bf933638972571d053.png
[a292409abd9b7565e6c659d144d5d71a.png]: /images/20221005/ad9ad8e9df17474fa4151b9a8a736614.png
[85a3df38413b05df3caa25e286392c67.png]: /images/20221005/990e680d3b0a49a68958ddbe96eb4f1e.png
[a6d2de81d2ad42037e8efb0926f434db.gif]: /images/20221005/b9bb70ccb05c410fbe0562dca054b8d9.png
[acf98db2bbc4741eb1792f5fcb384547.png]: /images/20221005/48be600e6a6344039423b11cc4daed09.png
[361f036d554abd44ce5b7f410abfcc6b.gif]: /images/20221005/3b742c2cc9314d819a6ba0d56564544d.png