搜索

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

前端瓶子君

共 16324字，需浏览 33分钟

 ·

2021-06-22 08:43


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

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

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;
}
复制代码

效果如下：

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%;
}
复制代码

效果如下：

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;
}
复制代码

效果如下：

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;
}
复制代码

效果如下：

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;
}
复制代码

效果如下：

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;
}
复制代码

效果如下：

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);
}
复制代码

效果如下：

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%;
}
复制代码

效果如下：

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%; }
复制代码

效果如下：

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%; }
复制代码

效果如下：

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);
}
复制代码

效果如下：

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%);
}
复制代码

效果如下：

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);
}
复制代码

效果如下：

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;
}
复制代码

效果如下：

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;
  }
}
复制代码

效果如下：

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处理器。

效果如下：

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)";
复制代码

效果如下：

typing.gif

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

关于本文：

来源：Leeon

https://juejin.cn/post/6969441630289920008

最后

欢迎关注【前端瓶子君】✿✿ヽ(°▽°)ノ✿
回复「算法」，加入前端编程源码算法群，每日一道面试题（工作日），第二天瓶子君都会很认真的解答哟！
回复「交流」，吹吹水、聊聊技术、吐吐槽！
回复「阅读」，每日刷刷高质量好文！
如果这篇文章对你有帮助，「在看」是最大的支持
 》》面试官也在看的算法资料《《
“在看和转发”就是最大的支持
浏览 40
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报
评论
图片
表情
推荐
站在巨人的肩上
统治宇宙的自然规律是什么？行星是如何运行的？是什么使它们保持在轨道上？人们千百年来都在试图解答这些问
站在巨人的肩上
站在巨人的肩上
0
肩上的云
肩上的云
0
肩上的云
歌手王建荣肩上的云1525165038发布日期2015-01-01ISRCFRX282001765时长4.30分钟流派国语流行,音乐,国际流行作曲家陈伟&周兵
几种基本图形的CSS画法（附源码）
w3cschool
0
解码华为nova10系列：站在“华为影像”巨人肩上
闫跃龙
0
CSS 画冰墩墩~
程序源代码
0
CSS画雪容融~
程序源代码
0
CSS 画冰墩墩~
前端瓶子君
0
肩上蜻蜓
肩上蜻蜓
0
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报