CSS矩形、三角形等

1、圆形

CSS代码如下：宽高一样，border-radius设为宽高的一半

#circle {

    width: 100px;

    height: 100px;

    background: red;

    -moz-border-radius: 50px;

    -webkit-border-radius: 50px;

    border-radius: 50px;

}

2、椭圆

CSS代码如下：border-radius:水平半径/垂直半径

#oval {

    width: 200px;

    height: 100px;

    background: red;

    -moz-border-radius: 100px / 50px;

    -webkit-border-radius: 100px / 50px;

    border-radius: 100px / 50px;

}

3、等边三角

上三角CSS代码如下：设置border-bottom宽度实线颜色，左右border左右宽度为一半，实线透明。下三角、左三角、右三角可举一反三实现。

#triangle-up {

    width: 0;

    height: 0;

    border-left: 50px solid transparent;

    border-right: 50px solid transparent;

    border-bottom: 100px solid red;

}

4、直角三角

左上三角CSS代码如下：border-top设置宽度实线颜色，border-right等宽实线透明。右上三角、左下三角、右下三角可举一反三实现。

#triangle-topleft {

    width: 0;

    height: 0;

    border-top: 100px solid red;

    border-right: 100px solid transparent;

}

5、平行四边形

CSS代码如下：transform: skew，倾斜角度即为四边形锐角的余角

#parallelogram {

    width: 150px;

    height: 100px;

    margin-left:20px;

    -webkit-transform: skew(20deg);

       -moz-transform: skew(20deg);

         -o-transform: skew(20deg);

    background: red;

}

6、梯形

CSS代码如下：上底长为width的值，下底长为width+border-left+border-right之和，高为border-bottom

#trapezoid {

    border-bottom: 100px solid red;

    border-left: 50px solid transparent;

    border-right: 50px solid transparent;

    height: 0;

    width: 100px;

}

7、五边形（五角大楼）

CSS代码如下：

#pentagon {

    position: relative;

    width: 54px;

    border-width: 50px 18px 0;

    border-style: solid;

    border-color: red transparent;

}

#pentagon:before {

    content: "";

    position: absolute;

    height: 0;

    width: 0;

    top: -85px;

    left: -18px;

    border-width: 0 45px 35px;

    border-style: solid;

    border-color: transparent transparent red;

}

8、六边形

CSS代码如下：

#hexagon {

    width: 100px;

    height: 55px;

    background: red;

    position: relative;

}

#hexagon:before {

    content: "";

    position: absolute;

    top: -25px;

    left: 0;

    width: 0;

    height: 0;

    border-left: 50px solid transparent;

    border-right: 50px solid transparent;

    border-bottom: 25px solid red;

}

#hexagon:after {

    content: "";

    position: absolute;

    bottom: -25px;

    left: 0;

    width: 0;

    height: 0;

    border-left: 50px solid transparent;

    border-right: 50px solid transparent;

    border-top: 25px solid red;

}

9、八边形

CSS代码如下：

#octagon {

    width: 100px;

    height: 100px;

    background: red;

    position: relative;

}

#octagon:before {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    border-bottom: 29px solid red;

    border-left: 29px solid #eee;

    border-right: 29px solid #eee;

    width: 42px;

    height: 0;

}

#octagon:after {

    content: "";

    position: absolute;

    bottom: 0;

    left: 0;

    border-top: 29px solid red;

    border-left: 29px solid #eee;

    border-right: 29px solid #eee;

    width: 42px;

    height: 0;

}

10、五角星

CSS代码如下：

#star-five {

   margin: 50px 0;

   position: relative;

   display: block;

   color: red;

   width: 0px;

   height: 0px;

   border-right:  100px solid transparent;

   border-bottom: 70px  solid red;

   border-left:   100px solid transparent;

   -moz-transform:    rotate(35deg);

   -webkit-transform: rotate(35deg);

   -ms-transform:     rotate(35deg);

   -o-transform:      rotate(35deg);

}

#star-five:before {

   border-bottom: 80px solid red;

   border-left: 30px solid transparent;

   border-right: 30px solid transparent;

   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: red;

   top: 3px;

   left: -105px;

   width: 0px;

   height: 0px;

   border-right: 100px solid transparent;

   border-bottom: 70px solid red;

   border-left: 100px solid transparent;

   -webkit-transform: rotate(-70deg);

   -moz-transform:    rotate(-70deg);

   -ms-transform:     rotate(-70deg);

   -o-transform:      rotate(-70deg);

   content: '';

}

11、六角星

CSS代码如下：一个上三角和一个下三角拼合而成

#star-six {

    width: 0;

    height: 0;

    border-left: 50px solid transparent;

    border-right: 50px solid transparent;

    border-bottom: 100px solid red;

    position: relative;

}

#star-six:after {

    width: 0;

    height: 0;

    border-left: 50px solid transparent;

    border-right: 50px solid transparent;

    border-top: 100px solid red;

    position: absolute;

    content: "";

    top: 30px;

    left: -50px;

}

12、八角星

CSS代码如下：

#burst-8 {

    background: red;

    width: 80px;

    height: 80px;

    position: relative;

    text-align: center;

    -webkit-transform: rotate(20deg);

       -moz-transform: rotate(20deg);

        -ms-transform: rotate(20deg);

         -o-transform: rotate(20eg);

            transform: rotate(20deg);

}

#burst-8:before {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    height: 80px;

    width: 80px;

    background: red;

    -webkit-transform: rotate(135deg);

       -moz-transform: rotate(135deg);

        -ms-transform: rotate(135deg);

         -o-transform: rotate(135deg);

            transform: rotate(135deg);

}

13、十二角星

CSS代码如下：

#burst-12 {

    background: red;

    width: 80px;

    height: 80px;

    position: relative;

    text-align: center;

}

#burst-12:before, #burst-12:after {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    height: 80px;

    width: 80px;

    background: red;

}

#burst-12:before {

    -webkit-transform: rotate(30deg);

       -moz-transform: rotate(30deg);

        -ms-transform: rotate(30deg);

         -o-transform: rotate(30deg);

            transform: rotate(30deg);

}

#burst-12:after {

    -webkit-transform: rotate(60deg);

       -moz-transform: rotate(60deg);

        -ms-transform: rotate(60deg);

         -o-transform: rotate(60deg);

            transform: rotate(60deg);

}

14、爱心

CSS代码如下：

#heart {

    position: relative;

    width: 100px;

    height: 90px;

}

#heart:before,

#heart:after {

    position: absolute;

    content: "";

    left: 50px;

    top: 0;

    width: 50px;

    height: 80px;

    background: red;

    -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%;

}

15、无穷大符号

CSS代码如下：

#infinity {

    position: relative;

    width: 212px;

    height: 100px;

}

#infinity:before,

#infinity:after {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    width: 60px;

    height: 60px;

    border: 20px solid red;

    -moz-border-radius: 50px 50px 0 50px;

         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);

}

16、鸡蛋

CSS代码如下：

#egg {

   display:block;

   width: 126px;

   height: 180px;

   background-color: red;

   -webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px;

   border-radius:        50%   50%  50%  50%  / 60%   60%   40%  40%;

}

17、食豆人（Pac-Man）

CSS代码如下：

#pacman {

  width: 0px;

  height: 0px;

  border-right: 60px solid transparent;

  border-top: 60px solid red;

  border-left: 60px solid red;

  border-bottom: 60px solid red;

  border-top-left-radius: 60px;

  border-top-right-radius: 60px;

  border-bottom-left-radius: 60px;

  border-bottom-right-radius: 60px;

}

18、提示对话框

CSS代码如下：

#talkbubble {

   width: 120px;

   height: 80px;

   background: red;

   position: relative;

   -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 transparent;

   border-right: 26px solid red;

   border-bottom: 13px solid transparent;

}

19、钻石

CSS代码如下：

#cut-diamond {

    border-style: solid;

    border-color: transparent transparent red transparent;

    border-width: 0 25px 25px 25px;

    height: 0;

    width: 50px;

    position: relative;

    margin: 20px 0 50px 0;

}

#cut-diamond:after {

    content: "";

    position: absolute;

    top: 25px;

    left: -25px;

    width: 0;

    height: 0;

    border-style: solid;

    border-color: red transparent transparent transparent;

    border-width: 70px 50px 0 50px;

}

20、阴阳八卦

CSS代码如下：

#yin-yang {

    width: 96px;

    height: 48px;

    background: #eee;

    border-color: red;

    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 red;

    border-radius: 100%;

    width: 12px;

    height: 12px;

}

#yin-yang:after {

    content: "";

    position: absolute;

    top: 50%;

    left: 50%;

    background: red;

    border: 18px solid #eee;

    border-radius:100%;

    width: 12px;

    height: 12px;

}

CSS矩形、三角形等的更多相关文章

CSS 制作三角形原理剖析
使用css制作三角形其实原理很简单,下面一步步解析. 1.html代码如下 <div class="triangle"> </div> 2.CSS代码 .t ...
css制作三角形，下拉框三角形
网站制作中常常需要下拉框,而如果下拉框如果只是单纯的矩形则会显得太过单调,所以这次教大家利用css制作三角形放在矩形上面首先利用css制作三角形 div { width:0px; height:0p ...
css画三角形原理解析
<div id="div1"></div><div id="div2"></div><div id=&qu ...
纯css画三角形
纯css画三角形与border元素相关设置border的属性 width: 100px; height: 100px; border-style: solid; border-width: 100p ...
CSS制作三角形和按钮
CSS制作三角形和按钮用上一篇博文中关于边框样式的知识点,能制作出三角形和按钮. 我先说如何制作三角形吧,相信大家在平时逛网站的时候都会看到一些导航栏中的三角形吧,比如说: 网易首页的头部菜单栏中, ...
CSS 魔法系列：纯 CSS 绘制三角形（各种角度）
我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...
CSS实现三角形
突然想起搞一把三角形. 简单来说: 建一个div 宽度.高度设为0 添加两个样式: border 和 border-color 如果需要一个三角形把其他边框都设为透明 transparent < ...
css绘制三角形原理
1.新建一个元素,将它的宽高都设置为0:然后通过设置border属性来实现三角形效果,下面是css绘制三角形的原理: <!DOCTYPE html> <html> <he ...
纯CSS写三角形-border法
(1)有边框的三角形我们来写下带边框的三角形. 如果是一个正方形,我们写边时,会用到border,但我们这里讨论的三角形本身就是border,不可能再给border添加border属性,所以我们需要 ...
经典CSS实现三角形图标原理解析
前言: 在写这篇文章之前,我也看过很多前端大神写的代码,But,都只是粘贴代码和给出显示效果,对于初学者来说大家都喜欢刨根问底,为什么要这样做呢? 接下来就让我给大家分享一下我对CSS实现三角形的理解 ...

随机推荐

Python3：输出当前目录所有目录和文件--walk（）函数
有了前一篇文章的介绍,再输出目录,也不过是多写一个函数的事情了,我把它封装成了类~~ 发现walk()真的是一个超级方便好用的函数.这种情况下用listdir()是搞定不了的啦 import os c ...
KVO实现原理
KVO意为键值观察Key-Value-Observer,本质仍然是观察者模式. 观察者模式的定义:一个目标对象管理所有依赖于它的观察者对象,并在它自身的状态改变时主动通知观察者对象.这个主动通知通常是 ...
Vue-计算属性和侦听属性
复杂逻辑应使用计算属性而不应写在插值表达式{{ }}里 <div id="app"> 原值:{{ msg }} <br> 翻转后的值:{{ reverseM ...
前端笔记知识点整合之JavaScript（一）初识JavaScript
一.JavaScript简介 1.1网页分层 web前端一共分三层: 结构层 HTML : 负责搭建页面结构样式层 CSS : 负责页面的美观行为层 JavaSc ...
python笔记01-05
作者:Vamei 出处:http://www.cnblogs.com/vamei https://blog.csdn.net/flyfrommath/article/details/77447587 ...
nginx unit PHP
2018-12-26 14:20:33 星期三综述: nginx unit php 的关系: nginx -> 转发请求到 8300端口 -> unit 转发 8300 收到的请求 -& ...
初学python之路-day12
本篇补上字符串的比较:按照从左往右比较每一个字符,通过字符对应的ascii进行比较一.函数默认值的细节 # 如果函数的默认参数的默认值为变量,在所属函数定义阶段一执行就被确定为当时变量存放的值 a ...
tp5 自定义排序
Ubuntu如何安装vncserver
Ubuntu上安装和配置vncserver,然后通过客户端进行连接,就能够使用图像界面的方式来运行上面的软件了. 1.使用apt-cache search vncserver命令搜索可以用来安装vnc ...
MySQL（三）
一.创建库 1.创建一个库: create database 数据库名;create database 库名 character set 编码; mysql> create database m ...

CSS矩形、三角形等

1、圆形

2、椭圆

3、等边三角

4、直角三角

5、平行四边形

6、梯形

7、五边形（五角大楼）

8、六边形

9、八边形

10、五角星

11、六角星

12、八角星

13、十二角星

14、爱心

15、无穷大符号

16、鸡蛋

17、食豆人（Pac-Man）

18、提示对话框

19、钻石

20、阴阳八卦

CSS矩形、三角形等的更多相关文章

随机推荐

热门专题