css绘制各种形状

效果：http://sandbox.runjs.cn/show/9lyjtbxl

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>border</title>

    <style type="text/css">

    div{

        margin:20px auto;

    }

    .div1{

        border-top:100px solid #f00;

        border-right:100px solid transparent;

        width:0;

        height:0;

    }

    .div2{

        width: 200px;

        height: 100px;

        background: red;

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

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

        border-radius: 100px / 50px;

    }

    .div3{

        width: 0;

        height: 0;

        border-left: 50px solid transparent;

        border-right: 50px solid transparent;

        border-bottom: 100px solid red;

    }

    .div4 {

        width: 0;

        height: 0;

        border-left: 50px solid transparent;

        border-right: 50px solid transparent;

        border-top: 100px solid red;

    }

    .div5 {

    width: 0;

    height: 0;

    border-top: 100px solid red;

    border-left: 100px solid transparent;

    }

    .div6 {

    width: 0;

    height: 0;

    border-bottom: 100px solid red;

    border-right: 100px solid transparent;

    }

    .div7 {

    width: 0;

    height: 0;

    border-bottom: 100px solid red;

    border-left: 100px solid transparent;

    }

    .div8 {

    width: 150px;

    height: 100px;

    margin-left:20px;

    -webkit-transform: skew(20deg);

    -moz-transform: skew(20deg);

    -o-transform: skew(20deg);

    background: red;

    }

    .div9 {

    border-bottom: 100px solid red;

    border-left: 50px solid transparent;

    border-right: 50px solid transparent;

    height: 0;

    width: 100px;

    }

    .div10 {

    width: 0;

    height: 0;

    border-left: 50px solid transparent;

    border-right: 50px solid transparent;

    border-bottom: 100px solid red;

    position: relative;

    }

    .div10: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;

    }

    .div11 {

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

    }

    .div11: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);

    }

    .div11: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: '';

    }

    .div12 {

    position: relative;

    width: 54px;

    border-width: 50px 18px 0;

    border-style: solid;

    border-color: red transparent;

    }

    .div12: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;

    }

    .div13 {

    width: 100px;

    height: 55px;

    background: red;

    position: relative;

    }

    .div13: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;

    }

    .div13: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;

    }

    .div14 {

    width: 100px;

    height: 100px;

    background: red;

    position: relative;

    }

    .div14: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;

    }

    .div14: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;

    }

    .dvi15 {

    position: relative;

    width: 100px;

    height: 90px;

    }

    .dvi15:before,

    .dvi15: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%;

    }

    .dvi15: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%;

    }

    .dvi16 {

    position: relative;

    width: 212px;

    height: 100px;

    }

    .dvi16:before,

    .dvi16: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);

    }

    .dvi16: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);

    }

    .div17 {

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

    }

    .div18 {

    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;

    }

    .div19 {

    width: 120px;

    height: 80px;

    background: red;

    position: relative;

    -moz-border-radius: 10px;

    -webkit-border-radius: 10px;

    border-radius: 10px;

    }

    .div19: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;

    }

    .div20 {

    background: red;

    width: 80px;

    height: 80px;

    position: relative;

    text-align: center;

    }

    .div20:before, .div20:after {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    height: 80px;

    width: 80px;

    background: red;

    }

    .div20:before {

    -webkit-transform: rotate(30deg);

    -moz-transform: rotate(30deg);

    -ms-transform: rotate(30deg);

    -o-transform: rotate(30deg);

    transform: rotate(30deg);

    }

    .div20:after {

    -webkit-transform: rotate(60deg);

    -moz-transform: rotate(60deg);

    -ms-transform: rotate(60deg);

    -o-transform: rotate(60deg);

    transform: rotate(60deg);

    }

    .div21 {

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

    }

    .div21: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);

    }

    .div22 {

    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;

    }

    .div22: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;

    }

    .div23 {

    width: 96px;

    height: 48px;

    background: #eee;

    border-color: red;

    border-style: solid;

    border-width: 2px 2px 50px 2px;

    border-radius: 100%;

    position: relative;

    }

    .div23:before {

    content: "";

    position: absolute;

    top: 50%;

    left: 0;

    background: #eee;

    border: 18px solid red;

    border-radius: 100%;

    width: 12px;

    height: 12px;

    }

    .div23:after {

    content: "";

    position: absolute;

    top: 50%;

    left: 50%;

    background: red;

    border: 18px solid #eee;

    border-radius:100%;

    width: 12px;

    height: 12px;

    }

    </style>

</head>

<body>

    <div class="div1"></div>

    <div class="div2"></div>

    <div class="div3"></div>

    <div class="div4"></div>

    <div class="div5"></div>

    <div class="div6"></div>

    <div class="div7"></div>

    <div class="div8"></div>

    <div class="div9"></div>

    <div class="div10"></div>

    <div class="div11"></div>

    <div class="div12"></div>

    <div class="div13"></div>

    <div class="div14"></div>

    <div class="div15"></div>

    <div class="div16"></div>

    <div class="div17"></div>

    <div class="div18"></div>

    <div class="div19"></div>

    <div class="div20"></div>

    <div class="div21"></div>

    <div class="div22"></div>

    <div class="div23"></div>

</body>

</html>

css绘制各种形状的更多相关文章

如何用 CSS 绘制各种形状
自适应的椭圆 1.自适应的椭圆实现方式是通过border-radius这个属性:border-radius它可以单独指定水平和垂直半径.用 / 分隔这两个值.并且该属性的值不仅可以接受长度值,还能接 ...
我是如何用 CSS 绘制各种形状的
自适应的椭圆 1.自适应的椭圆实现方式是通过border-radius这个属性:border-radius它可以单独指定水平和垂直半径.用 / 分隔这两个值.并且该属性的值不仅可以接受长度值,还能接 ...
Css绘制形状
前言:终于我的大一生活结束了,迎来了愉快的暑假,大家都开始了各自的忙碌.一直忙着一些项目的事情,终于决定今天要更新一篇博客了,对上一阶段的学习做简单的总结. 这次我主要总结一下用Css绘制各种形状的技 ...
css绘制常见的几何图形
前言:终于我的大一生活结束了,迎来了愉快的暑假,大家都开始了各自的忙碌.一直忙着一些项目的事情,终于决定今天要更新一篇博客了,对上一阶段的学习做简单的总结. 这次我主要总结一下用Css绘制各种形状的技 ...
CSS 魔法系列：纯 CSS 绘制图形（各种形状的钻石）
我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...
用CSS绘制最常见的40种形状和图形
今天在国外的网站上看到了很多看似简单却又非常强大的纯CSS绘制的图形,里面有最简单的矩形.圆形和三角形,也有各种常见的多边形,甚至是阴阳太极和网站小图标,真的非常强大,分享给大家. Square(正方 ...
摘记史上最强大的40多个纯CSS绘制的图形（一）
今天在国外的网站上看到了很多看似简单却又非常强大的纯CSS绘制的图形,里面有最简单的矩形.圆形和三角形,也有各种常见的多边形,甚至是阴阳太极和网站小图标,真的非常强大,分享给大家. Square(正方 ...
史上最强大的40多个纯CSS绘制的图形
Square(正方形) #square { width: 100px; height: 100px; background: red; } Rectangle(矩形) #rectangle { wid ...
40多个纯CSS绘制的图形
本文由码农网 – 陈少华原创,转载请看清文末的转载要求. 今天在国外的网站上看到了很多看似简单却又非常强大的纯CSS绘制的图形,里面有最简单的矩形.圆形和三角形,也有各种常见的多边形,甚至是阴阳太极和 ...

随机推荐

Ubuntu 17.4下如何安装和配置flash player
Ubuntu Linux系统下没有自带的flash player,要自己手动安装.下面post出简单的安装过程. 首先打开终端,输入命令:sudo apt-get install flashplugi ...
LightOJ 1070 Algebraic Problem：矩阵快速幂 + 数学推导
题目链接:http://lightoj.com/volume_showproblem.php?problem=1070 题意: 给你a+b和ab的值,给定一个n,让你求a^n + b^n的值(MOD ...
kvm初体验之一：参考文档
KVM Virtualization in RHEL 6 Made Easy KVM Virtualization in RHEL 6 Made Easy – Part 2 RHEL 6 Virtua ...
nodejs && apidoc
1. 安装nodejs http://www.nodejs.org 源码编译 configure —prefix=/usr/local/nodejs make ...
python基础-大杂烩
random()随机函数 import random print(random.choice('abcdefghij')) #随机取这些字母 print(random.choice(['apple', ...
Apache-SimpleEmail 简单应用
比JavaMail使用方法要直接,jar包只需要在JavaMail的基础上添加commons-email-1.4.jar即可. 代码: // QQ邮箱发送邮件 SimpleEmail simpleEm ...
Linux下安装GB2312的示例
Linux下安装GB2312的示例 Step 1: 到Linux字符集的安装包目录下 [cd /usr/share/i18n/charmaps] Step 2: 解压该目录下的GB2312.gz ...
nginx中共享内存的使用
在nginx的进程模型下,类似流量统计.流量控制.数据共享.等需要多个工作进程共同配合完成任务,共享内存是一个重要的进程通讯的方案.本文介绍在nginx的代码中与共享内存相关的功能,包括ngx_shm ...
idea 调试技巧1
1 多线程调试开发过多线程应用的朋友应该有体会,有些时候,为了观察多个线程间变量的不同状态,以及锁的获取等,就会想到在代码里加个断点debug一下. 在IDE里断点停下来的时候,可以切换到另外的线程 ...
hdu水仙花
水仙花数 Time Limit : 2000/1000ms (Java/Other) Memory Limit : 65536/32768K (Java/Other) Total Submission ...

css绘制各种形状

css绘制各种形状的更多相关文章

随机推荐

热门专题