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绘制的图形,里面有最简单的矩形.圆形和三角形,也有各种常见的多边形,甚至是阴阳太极和 ...

随机推荐

PYTHON 爬虫笔记九:利用Ajax+正则表达式+BeautifulSoup爬取今日头条街拍图集（实战项目二）
利用Ajax+正则表达式+BeautifulSoup爬取今日头条街拍图集目标站点分析今日头条这类的网站制作,从数据形式,CSS样式都是通过数据接口的样式来决定的,所以它的抓取方法和其他网页的抓取方 ...
本地Ubuntu16搭建Seafile
本地搭建Seafile 1.下载 2.解压 3.创建目录 mySeafile 4.将解压包放入mySeafile中 5.创建installed 将压缩包放入installed 安装准备工作 pytho ...
Linux- Linux自带定时调度Crontab使用详解
Linux自带定时调度Crontab使用详解在Linux当中,有一个自带的任务调度功能crontab,它是针对每个用户,每个用户都可以调度自己的任务. 示例:每分钟执行一次,将时间写入到指定文件当中 ...
分享知识-快乐自己：Struts2（动态方法、动态结果、通配符、方法内部跳转、action跳转、OGNL 的使用及注意事项）
这里主要以案例演示:涵盖以下知识点 1.动态方法调用:使用关键符号 ! 进行操作例如:/命名空间 ! 方法名 2.动态结果集:就是说,通过后台返回的结果 ${} 获取,重定向到符合预期的页面. ...
mac下配置java运行环境
1. oracle官网下载java se jdk地址 http://www.oracle.com/technetwork/java/javase/downloads/jdk9-downloads-38 ...
如何在u盘上安装系统, (非安装盘)
在u盘中永久安装Fedora. 需要两个u盘(live usb), 一个系统镜像文件. 方法是: 用一个u盘作安装盘, 然后通过这个u盘把系统安装到另一个u盘上. 两个U盘上的文件都会被覆盖. 1. ...
liunx让命令窗口显示段路径的方法
平时我们使用linux终端命令行的时候,常常会被一个问题困扰,那就是文件路径过长,有时候甚至超过了一行,这样看起来非常别扭,其实只要两步就可以解决这个问题: 1,修改.bashrc文件(用户根目录下) ...
ACM学习历程—HDU 4726 Kia's Calculation（贪心&&计数排序）
DescriptionDoctor Ghee is teaching Kia how to calculate the sum of two integers. But Kia is so carel ...
关于Django ORM filter方法小结
django filter是一个过滤器,相当于SQL的select * from where. filter返回一个QuerySet对象,还可以在该对象上继续进行django orm 该有的操作. 有 ...
python反复执行某个命令
#! /usr/bin/env python #coding=utf-8 # 以需要的时间间隔执行某个命令 import time, os def re_exe(cmd, inc = 60 ...

css绘制各种形状

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

随机推荐

热门专题