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

随机推荐

8--json交互
8.1 为什么要进行json数据交互 json数据格式在接口调用.html页面中较常用,json格式较简单,解析较方便. 比如:webservice接口,传输json数据. 8.2 spri ...
iOS Assertion failure in -[UITableView _classicHeightForRowAtIndexPath:]
Assertion failure in -[UITableView _classicHeightForRowAtIndexPath:], /SourceCache/UIKit_Sim/UIKit-3 ...
python注释行与段落
注释行:# 注释段:‘’‘ ’‘’
html5--1.9 img元素嵌入图片
html5--1.9 img元素嵌入图片学习要点: img元素嵌入图片学习一个新属性:title 1.img的属性 1.src:必要属性,制定图片来源的路径; 2.alt属性:当图片无法显示时的替代 ...
如何在u盘上安装系统, (非安装盘)
在u盘中永久安装Fedora. 需要两个u盘(live usb), 一个系统镜像文件. 方法是: 用一个u盘作安装盘, 然后通过这个u盘把系统安装到另一个u盘上. 两个U盘上的文件都会被覆盖. 1. ...
《java编程思想》读后笔记：一，标签
标签是后面跟有冒号的标识符,格式如下: label : java中通过break与continue关键词可以完成类似于跳转的操作,其实现机制便是标签. 虽然很少有人使用,但是其有自身的适用场景:多层 ...
python爬虫知识点总结（五）正则表达式
在线正则表达式匹配:http://tool.oschina.net/regex 正则表达式学习:https://c.runoob.com/front-end/854 一.什么是正则表达式? 常见匹配模 ...
SimpliciTI简介
SimpliciTI简介 SimpliciTI是TI开发的一份专门针对其CCxxxx系列无线通信芯片的网络协议.按照其官方说法SimpliciTI是一个基于连接的点对点通讯协议.它支持两种网络拓扑结构 ...
python基础知识-字符串
字符串: 赋值方法 a = 'name' a = str('name') 字符串的方法: #!/usr/bin/env python class str(object): ""&q ...
KMP匹配 (1)
---恢复内容开始--- 字符串匹配是计算机的基本任务之一. 举例来说,有一个字符串"BBC ABCDAB ABCDABCDABDE",我想知道,里面是否包含另一个字符串" ...

css绘制各种形状

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

随机推荐

热门专题