CSS3实现各种图形样式汇总

作者: 沐溪溪子 | 来源:发表于2020-12-22 23:08 被阅读0次

CSS3实现各种图形样式汇总
各种纯css图标
成都分院第143期：如何用css绘制一些常见图形
高效-1自定义radio/checkbox样式
css3绘制各种图形
好玩的CSS抖动样式 – CSS Shake ,支持 react
05_css中的过渡和动画效果了解吗
使用CSS3美化复选框checkbox
12、css3新增样式
修改checkbox默认样式

本文CSS3实现的图形样式：三角形、水滴、菱形、平行四边形、梯形、便签、五边形、六边形、五角星、对话框、八卦、搜索、折叠型、鸡蛋、心形、无穷符号。

三角形

Html：

<div class="botsanjiao"></div>

Css：

.botsanjiao{
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid #3F3E3E;
}

如下图：

水滴

Html：

<div class="dropindex">
    <span class="waterdrop"></span>
    <span class="droplabel">6</span>
</div>

Css：

.dropindex{
    position: absolute;
    left: 20px;
    display: inline-block;
    z-index: 1;
    width: 16px;
    height: 16px;
}
.dropindex .waterdrop{
    position: absolute;
    left: 0;
    top: 0;
    width: 16px;
    height: 16px;
    line-height: 16px;
    text-align: center;
    background: #ffa032;
    display: inline-block;
    border-radius: 80% 0 55% 50% / 55% 0 80% 50%;
    -webkit-transform: rotate(134deg);
    transform: rotate(134deg);
    z-index: 2;
}
.dropindex .droplabel{
    position: absolute;
    left: 4px;
    top: 1px;
    color: #fff;
    font-size: 12px;
    z-index: 4;
}

如下图：

菱形

Html：

<div id="diamond"></div>

Css：

#diamond {
    width: 120px;
    height: 120px;
    background: #1eff00;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -webkit-transform-origin: 0 100%;
    -moz-transform-origin: 0 100%;
    -ms-transform-origin: 0 100%;
    -o-transform-origin: 0 100%;
    transform-origin: 0 100%;
    margin: 60px 0 10px 310px;
}

如下图：

平行四边形

Html：

<div id="parallelogram"></div>

Css：

#parallelogram {
    margin:50px;
    width: 160px;
    height: 100px;
    background: #8734f7;
    -webkit-transform: skew(30deg);
    -moz-transform: skew(30deg);
    -o-transform: skew(30deg);
    transform: skew(30deg);
}

如下图：

梯形

1. 梯形导航

Html：

<div class="nav">
    <div class="navleft"></div>
    <div class="navright"></div>
</div>

Css：

.nav{
    overflow: hidden;
    position: relative;
}
.navleft{
    display: inline-block;
    float: left;
    width: 48.5%;
    border-top: 40px solid #bbb;
    border-right: 28px solid transparent;
}
.navright{
    position:absolute;
    right:0;
    top:0;
    display: inline-block;
    width: 48.5%;
    border-bottom: 40px solid #999;
    border-left: 28px solid transparent;
}

如下图：

2. 纯色梯形

Html：

<div class="tx_bot"></div>

Css：

.tx_bot {
  width: 100%;
  height: 0px;
  border-top: 2.2rem solid rgba(118, 14, 136, 0.4);
  border-right: 1.8rem solid transparent;
  border-left: 1.8rem solid transparent;
  display: inline-block;
  position: relative;
  top: 27rem;
  left: 0;
}

如下图：

便签

Html：

<div class="tags custom"> 
  <a href="#">默认</a> 
  <a href="#" class="tag-blue">淡蓝色</a>
  <a href="#" class="tag-blue inset">淡蓝色文字</a> 
</div>

Css：

body {
    background: #f5f5f5;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    font-size: 12px;
    padding: 50px 0 10px 0;
}

.custom {
    width: 260px;
    margin: 0 auto;
}

.tags {
    padding: 0;
}

.tags a {
    background: red;
    -webkit-border-top-right-radius: 3px;
    -webkit-border-bottom-right-radius: 3px;
    -moz-border-radius-topright: 3px;
    -moz-border-radius-bottomright: 3px;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
    box-shadow: 0 1px 0 rgba(255,255,255,0.5) inset;
    display: inline-block;
    font-size: 12px;
    font-weight: bold;
    line-height: 25px;
    height: 25px;
    padding: 0 10px;
    position: relative;
    text-shadow: 0 1px 0 rgba(0,0,0,0.5);
    text-decoration: none;
    margin: 0 15px 5px 0;
    border: 1px solid;
    border-left: 0;
    color: #fff;
}

.tags a:before {
    background: red;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    zoom: 1;
    box-shadow: 1px 0px 0 rgba(255,255,255,0.5) inset;
    content: '';
    height: 18px;
    left: -10px;
    position: absolute;
    top: 3px;
    width: 18px;
    z-index: -1;
    border: 1px solid;
    border-right: 0;
    border-top: 0;
}

.tags a:after {
    position: absolute;
    background: #fff;
    content: '';
    width: 5px;
    height: 5px;
    left: 0;
    border-radius: 5px;
    top: 9px;
    border: 1px solid #888;
}
.tags a:hover {
    background: #aaa;
}
.tags a:hover:before {
    background: #aaa;
}
.tags a:active {
    background: #aaa;
}
.tags a:active:before {
    background: #aaa;
}
.tags .inset {
    color: rgba(0,0,0,0.5);
    text-shadow: 0 1px 0 rgba(255,255,255,0.5);
} 
/* ----------- Customs ----------- */ 
.tags a, .tags a:before {
    background-color: #b7b7b7;
}
.tags a, .tags a:after, .tags a:before {
    border-color: #777;
}
.tags a.inset {
    color: #454545;
}
.tags .tag-blue, .tags .tag-blue:before {
    background-color: #57c1ff;
}
.tags .tag-blue, .tags .tag-blue:after, .tags .tag-blue:before {
    border-color: #0078d8;
}
.tags .tag-blue.inset {
    color: #054854;
} 
.tags .tag-blue:hover {
    background: #1fa7f7;
}
.tags .tag-blue:hover:before {
    background: #1fa7f7;
}
.tags .tag-blue:active {
    background: #1fa7f7;
}
.tags .tag-blue:active:before {
    background: #1fa7f7;
}

如下图：

五边形

Html：

<div id="pentagon"></div>

Css：

#pentagon {
    margin-top: 50px;
    position: relative;
    width: 54px;
    border-width: 50px 18px 0;
    border-style: solid;
    border-color: #f00 #0000;
}
#pentagon:before {
    content: "";
    position: absolute;
    height: 0;
    width: 0;
    top: -85px;
    left: -18px;
    border-width: 0 45px 35px;
    border-style: solid;
    border-color: #0000 #0000 #f00;
}

如下图：

六边形

Html：

<div id="hexagon"></div>

Css：

#hexagon {
    width: 100px;
    height: 55px;
    background: #fc5e5e;
    position: relative;
    margin: 50px;
}
#hexagon:before {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    top: -25px;
    left: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 25px solid #fc5e5e;
}
#hexagon:after {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    bottom: -25px;
    left: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 25px solid #fc5e5e;
}

如下图：

五角星

Html：

<div id="star-five"></div>

Css：

#star-five {
    margin: 70px 0;
    position: relative;
    display: block;
    color: #f00;
    width: 0px;
    height: 0px;
    border-right: 100px solid #0000;
    border-bottom: 70px solid #f00;
    border-left: 100px solid #0000;
    -moz-transform: rotate(35deg);
    -webkit-transform: rotate(35deg);
    -ms-transform: rotate(35deg);
    -o-transform: rotate(35deg);
}
#star-five:before {
    border-bottom: 80px solid #f00;
    border-left: 30px solid #0000;
    border-right: 30px solid #0000;
    position: absolute;
    height: 0;
    width: 0;
    top: -45px;
    left: -65px;
    display: block;
    content: '';
    -webkit-transform: rotate(-35deg);
    -moz-transform: rotate(-35deg);
    -ms-transform: rotate(-35deg);
    -o-transform: rotate(-35deg);
}
#star-five:after {
    position: absolute;
    display: block;
    color: #f00;
    top: 3px;
    left: -105px;
    width: 0px;
    height: 0px;
    border-right: 100px solid #0000;
    border-bottom: 70px solid #f00;
    border-left: 100px solid #0000;
    -webkit-transform: rotate(-70deg);
    -moz-transform: rotate(-70deg);
    -ms-transform: rotate(-70deg);
    -o-transform: rotate(-70deg);
    content: '';
}

如下图：

对话框

Html：

<div id="talkbubble"></div>

Css：

#talkbubble {
    width: 120px;
    height: 80px;
    background: #f00;
    position: relative;
    left: 30px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
}
#talkbubble:before {
    content: "";
    position: absolute;
    right: 100%;
    top: 26px;
    width: 0;
    height: 0;
    border-top: 13px solid #0000;
    border-right: 26px solid #f00;
    border-bottom: 13px solid #0000;
}

如下图：

八卦

Html：

<div id="yin-yang"></div>

Css：

#yin-yang {
    width: 96px;
    height: 48px;
    background: #eee;
    border-color: #000;
    border-style: solid;
    border-width: 2px 2px 50px 2px;
    border-radius: 100%;
    position: relative;
}
#yin-yang:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    background: #eee;
    border: 18px solid #000;
    border-radius: 100%;
    width: 12px;
    height: 12px;
}
#yin-yang:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    background: #000;
    border: 18px solid #eee;
    border-radius: 100%;
    width: 12px;
    height: 12px;
}

如下图：

搜索

Html：

<div id="magnifying-glass"></div>

Css：

#magnifying-glass {
    font-size: 10em;
    display: inline-block;
    width: 0.4em;
    height: 0.4em;
    border: 0.1em solid #000;
    position: relative;
    border-radius: 0.35em;
}
#magnifying-glass::before {
    content: "";
    display: inline-block;
    position: absolute;
    right: -0.25em;
    bottom: -0.1em;
    border-width: 0;
    background: #000;
    width: 0.35em;
    height: 0.08em;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
}

如下图：

折叠型

Html：

<div id="chevron"></div>

Css：

#chevron {
    position: relative;
    text-align: center;
    padding: 12px;
    margin-bottom: 6px;
    height: 60px;
    width: 200px;
}
#chevron:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 51%;
    background: #000;
    -webkit-transform: skew(0deg, 6deg);
    -moz-transform: skew(0deg, 6deg);
    -ms-transform: skew(0deg, 6deg);
    -o-transform: skew(0deg, 6deg);
    transform: skew(0deg, 6deg);
}
#chevron:after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 50%;
    background: #000;
    -webkit-transform: skew(0deg, -6deg);
    -moz-transform: skew(0deg, -6deg);
    -ms-transform: skew(0deg, -6deg);
    -o-transform: skew(0deg, -6deg);
    transform: skew(0deg, -6deg);
}

如下图：

鸡蛋

Html：

<div id="egg"></div>

Css：

#egg {
    display: block;
    width: 126px;
    height: 180px;
    background-color: #f1c55e;
    -webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px;
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}

如下图：

心形

Html：

<div id="heart"></div>

Css：

#heart {
    position: relative;
}
#heart:before,#heart:after {
    content: "";
    width: 70px;
    height: 115px;
    position: absolute;
    background: red;
    left: 70px;
    top: 0;
    -webkit-border-radius: 50px 50px 0 0;
    -moz-border-radius: 50px 50px 0 0;
    border-radius: 50px 50px 0 0;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -webkit-transform-origin: 0 100%;
    -moz-transform-origin: 0 100%;
    -ms-transform-origin: 0 100%;
    -o-transform-origin: 0 100%;
    transform-origin: 0 100%;
}
#heart:after {
    left: 0;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-transform-origin: 100% 100%;
    -moz-transform-origin: 100% 100%;
    -ms-transform-origin: 100% 100%;
    -o-transform-origin: 100% 100%;
    transform-origin: 100% 100%;
}

如下图：

无穷符号

Html：

<div id="infinity"></div>

Css：

#infinity {
    width: 220px;
    height: 100px;
    position: relative;
}
#infinity:before,#infinity:after {
    content: "";
    width: 60px;
    height: 60px;
    position: absolute;
    top: 0;
    left: 0;
    border: 20px solid #06c999;
    -moz-border-radius: 50px 50px 0;
    border-radius: 50px 50px 0 50px;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
#infinity:after {
    left: auto;
    right: 0;
    -moz-border-radius: 50px 50px 50px 0;
    border-radius: 50px 50px 50px 0;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}

如下图：

CSS3实现各种图形样式汇总
本文CSS3实现的图形样式：三角形、水滴、菱形、平行四边形、梯形、便签、五边形、六边形、五角星、对话框、八卦、搜索...
各种纯css图标
各种纯css图标 CSS3可以实现很多漂亮的图形，我收集了32种图形，在下面列出。直接用CSS3画出这些图形，要比...
成都分院第143期：如何用css绘制一些常见图形
目录 1.背景介绍 CSS3可以实现很多漂亮的图形，直接用CSS3画出这些图形，要比贴图性能更好，体验更加，是一种...
高效-1自定义radio/checkbox样式
自定义radio/checkbox样式借助css3的伪类：checked实现
css3绘制各种图形
好玩的CSS抖动样式 – CSS Shake ,支持 react
CSS Shake是一个使用CSS3实现的动画样式，使用SASS编写，利用它我们可以实现多种不同样式的抖动效果（如...
05_css中的过渡和动画效果了解吗
一、CSS3 过渡 1、CSS3 过渡简介 CSS3过渡是元素从一种样式逐渐改变为另一种的效果。（1）实现过渡效...
使用CSS3美化复选框checkbox
通过css3伪元素实现以下样式效果checkbox复选框 html部分 css部分
12、css3新增样式
css3新增样式: IE6、7、8不支持css3样式，并且不同浏览器对css3样式会有不同程度的支持，甚至不支持，...
修改checkbox默认样式
利用CSS3伪类修改CheckBox样式下面是html代码 CSS 代码实现原理,将checkbox隐藏.用l...

CSS3实现各种图形样式汇总

三角形

水滴

菱形

平行四边形

梯形

1. 梯形导航

2. 纯色梯形

便签

五边形

六边形

五角星

对话框

八卦

搜索

折叠型

鸡蛋

心形

无穷符号

相关文章

CSS3实现各种图形样式汇总

各种纯css图标

成都分院第143期：如何用css绘制一些常见图形

高效-1自定义radio/checkbox样式

css3绘制各种图形

好玩的CSS抖动样式 – CSS Shake ,支持 react

05_css中的过渡和动画效果了解吗

使用CSS3美化复选框checkbox

12、css3新增样式

修改checkbox默认样式

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读