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

随机推荐

使用pip安装第三方库报错记录
今天在使用pycharm导入第三方库的时候,报了好多超时错误,还有标题中的找不到版本,应该是网络的原因,记录下解决的办法: raise ReadTimeoutError(self._pool, Non ...
SpringBoot之外部Tomcat运行Spring Boot项目
内置tomcat8.5.28 外置的要高于此版本才OK spring boot1.5是访问不了jsp页面的以后要以2.0版本为主流的
python之tkinter_1
以下内容来自:https://blog.csdn.net/wangyiyan315/article/details/16361065 from tkinter import * # 导入tkinter ...
Android6.0 旋转屏幕（五）WMS启动应用流程（屏幕方向相关）
一.强制设置方向 1.Activity 如果要强制设置一个Activity的横竖屏可以通过Manifest去设置,跟Activity相关的信息都会保存在ActivityInfo当中. android: ...
在CI框架中的配置整合amfphp
之前做的项目用到CI框架和amfphp的整合,主要用于php与flex的交互,在此做一下记录: 一．安装CI框架: 1. 搭建PHP运行环境,本人在WIN7下用WAMP作测试,安装目录:d:/wa ...
leetcode 304. Range Sum Query 2D - Immutable（递推）
Given a 2D matrix matrix, find the sum of the elements inside the rectangle defined by its upper lef ...
linux命令学习笔记（44）：top命令
top命令是Linux下常用的性能分析工具,能够实时显示系统中各个进程的资源占用状况,类似于Windows的任务管理器.下面详细介绍它的使用方法.top是一个动态显示过程,即可以通过用户按键来不断刷 ...
xpath技术，用在dom4j中
title: xPath语法应用 tags: xPath,dom4j grammar_cjkRuby: true --- 在dom4j中,会使用到xPath技术. 在项目中导入 jaxen-1.1-b ...
linux 安装SSH Server + FTP Server(openssh-server + vsftp)
openssh-server (推荐. 一般ssh,ftp 都是单独的,但是这个包含2个) 默认ubuntu 已经安装了, ssh client ,ftp client dpkg -l | grep ...
java去任意范围的随机数
一.java.uitl.Randomrandom.nextInt(20),任意取[0,20)之间整数,其中0可以取到,20取不到二.取某个范围的任意数public static String get ...

css绘制各种形状

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

随机推荐

热门专题