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

最新推荐文章于 2024-04-11 10:13:41 发布
最新推荐文章于 2024-04-11 10:13:41 发布
阅读量184 收藏 1
点赞数
分类专栏： 前端 文章标签： css css3
原文链接：https://mp.weixin.qq.com/s/zwtpxEGPJf10DklXKhKIjw
版权

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

效果如下：

图片

@年年有鱼
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue + element 实现动态表单
qq_36210329的博客
06-06 2018
对于动态增减表单项，Element UI 官方文档表单那一节已经介绍得很清楚了，我之前没有看见，绕了很多弯路，这里针对点击按钮增删一排输入框的问题做一个总结。 效果图如下 存在一排必填的姓名与手机号，点击增加后会新增一行，点击每行后面的删除图标则会删除该行 必填项很简单，就是普通表单： <el-form ref="form" :rules="formRules" :inline="true" :model="form" label-wi.
用html和css制作图片集
PDyee的博客
09-23 1698
图片集 html代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <
27个css图片集效果整理
weixin_34258838的博客
04-01 539
图片集是一个重要的网页设计形式，图片集的形式也多种多样，实现的方式也有很多中，js、flash、css都可以实现不同效果的图片集。今天我们整理了27个css实现的图片集效果与大家分享。 1- Dynamic Drive 2- Cross Browser Multi-Page Photograph Gallery 3- CSS Photo Shuffler ...
58个css3设计实例_图片集、滑动效果、动画
dczjn9698的博客
12-13 275
本文来自：http://www.m4html.com/58-Amazing-CSS3-Image-Galleries-Sliders-Animations.html css3技术，已经是前端设计师将来掌握的技术之一，而学习它最好的方法就是观看一些其它设计师的实例作品，今天列出58个相关实例，主要是图片集、滑动效果、以及动画等，我们一起来研究研究吧。 Sliding CSS3 T...
css--图片整合（精灵图）
weixin_34418883的博客
07-20 326
图片整合（精灵图） 精灵图的优点： 减少图片的字节 减少了网页的http请求，从而大大的提高了页面的性能 解决了网页设计师在图片命名上的困扰，只需对一张集合的图片上命名就可以了，不需要对每一个小元素进行命名，从而提高了网页的制作效率。 更换风格方便，只需要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就可以改变。维护起来更加方便...
牛笔了！字节跳动大佬整理：CSS-核心知识（万字长文，值得收藏！）
最新发布
2401_84150191的博客
04-11 867
之前我们通常是在预处理器里才可以使用变量，而现在 CSS 里也支持了变量的用法。通过自定义属性就可以在想要使用的地方引用它。自定义属性也和普通属性一样具有级联性，申明在 :root 下的时候，在全文档范围内可用，而如果是在某个元素下申明自定义属性，则只能在它及它的子元素下才可以使用。自定义属性必须通过--x的格式申明，比如：–theme-color: red;使用自定义属性的时候，需要用 var 函数。比如：定义自定义属性:root {使用变量h1 {复制代码。
CSS3卫星信息传送图形动画特效
07-24
总的来说，"CSS3卫星信息传送图形动画特效"是CSS3技术在网页设计中的一次巧妙应用，它展示了如何利用CSS3的动画和变换特性，创造出富有创意和科技感的视觉体验。开发者可以在此基础上进行扩展和定制，适应不同项目的...
CSS3 画基本图形，圆形、椭圆形、三角形等
09-27
在CSS3中，绘制基本图形是一项非常实用的功能，它允许开发者使用纯CSS创建各种形状，如圆形、椭圆形、三角形、平行四边形、梯形、六角星以及五角星等，无需借助图像编辑软件。下面我们将详细介绍如何利用CSS3实现...
jQuery跟CSS3动态绘画图形特效特效代码
03-20
在这个动态绘画图形特效中，CSS3主要负责定义图形的样式和动画效果。例如，可以使用`linear-gradient`来模拟画笔的颜色渐变，或者使用`@keyframes`规则来创建平滑的绘制过程。 具体实现步骤如下： 1. **图片分析**...
Web前端-Vue ElementUI el-input组件绑定点击事件
热门推荐
MinggeQingchun的博客
12-22 2万+
1、element中el-input组件事件 <el-input v-model="value" v-on:change="handleChange"></el-input> <el-input v-model="value" @change="handleChange"></el-input> <el-input v-model="value" v-on:input="handleChange"></el-input> &lt
CSS+JS实现图片集展示
12-31
1、图片的展示与翻页； 2、点击图片放大图片。
vue+element表格实现多层数据的嵌套
YYYY77777的博客
05-16 2388
本来想着让后端在list里面多返回一个id,就不用这么麻烦要循环嵌套，后端说没有id,让前端直接循环，不用多说直接上代码。后台接口返回的数据是嵌套多了一层，直接上图，后台返回的数据结构。
CSS+JS实现图片集展示（二）
weixin_30414305的博客
01-01 331
题目与上面的两篇文章有所重复，但是内容与上两篇上有所区别，本文中，实现的图片集展示的效果为： 1、详细图和缩略图的同步展示； 2、图片的自动播放； 3、显示图片的缩影图的焦点显示与别的图片的遮盖显示； 4、鼠标移动至详图显示图片控制控件。 具体效果图如下： 初始化或者第一张状态 中间状态 最后一张状态 这种方式的图片展示一般...
浅谈BFC—CSS的低调大佬
喵大嗷的博客
12-12 631
说起bfc，第一印象就是这哥们不是清浮动用的么？浮动使用不当可能会造成页面的塌陷，如果触发了BFC就不会造成页面的塌陷，具体原理？不太清楚。。。。。某日在一论坛网站看到了一些关于BFC的介绍，“当你在修改样式的时候，就会在不知不觉的时候触发了神奇的BFC，用了却不知晓。”突然觉得这哥们真的太低调了，以前从来没有认真的去探讨过他。先来说说什么是BFC（Block Formatting Context）
阿里P7大佬整理的十几个CSS高级常见技巧，真是太实用了
weixin_42686892的博客
02-27 512
1-1. 设置input 的placeholder的字体样式 设置input占位符的样式 input::-webkit-input-placeholder { /* Chrome/Opera/Safari */ color: red; } input::-moz-placeholder { /* Firefox 19+ */ color: red; } input:-ms-input-placeholder { /* IE 10+ */ color: red; } i
CSS3 动画大赏：47个炫酷示例
13. **3DMeninas**：3D立体的女性人物模型，展示了CSS3在3D建模上的应用。 14. **PolaroidGallery**：具有逼真翻转效果的宝丽来照片画廊，模仿真实的宝丽来相机照片。 15. **Space**：一个图形密集的太空主题动画...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值