CSS各种图形绘制

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>绘图</title>
<style type="text/css">

div{
   background:black;
}

/*绘正方形*/
.square{
   width:100px;
   height:100px;
}

/*绘长方形*/
.retangle{
  width:200px;
  height:100px;
}

/*绘图形*/
.cirecle{
   width:100px;
   height:100px;
   border-radius:50px;   /*把边框设置为圆角*/
}

/*图柱形*/
.cylinder{
  width:100px;
  height:100px;
  border-radius:100px/50px;
}
/*椭圆形*/
.oval{
  width:200px;
  height:100px;
  border-radius:100px/50px;
}
/*上三角形*/
.tirangle-up{
   width:0px;
   height:0px;
   border-left:50px solid transparent;
   border-right:50px solid transparent;
   border-bottom:100px solid red;
}
/*下三角形*/
.tirangle-down{
   width:0px;
   height:0px;
   border-left:50px solid transparent;
   border-right:50px solid transparent;
   border-top:100px solid red;
}

/*平边三角形*/
.tirangle-equal{
   width:0px;
   height:0px;
   border-left:50px solid transparent;
   border-right:50px solid transparent;
   border-bottom:50px solid red;
}
/*左边三角形*/
.tirangle-left{
   width:0px;
   height:0px;
   border-top:50px solid transparent;
   border-right:100px solid red;
   border-bottom:50px solid transparent;
}
/*右边三角形*/
.tirangle-right{
   width:0px;
   height:0px;
   border-top:50px solid transparent;
   border-left:100px solid red;
   border-bottom:50px solid transparent;
}
/*左上三角形*/
.tirangle-left-up{
   width:0px;
   height:0px;
   border-top:100px solid red;
   border-right:200px solid transparent;

}
/*右上三角形*/
.tirangle-right-up{
   width:0px;
   height:0px;
   border-top:100px solid red;
   border-left:200px solid transparent;

}
/*左下三角形*/
.tirangle-left-down{
   width:0px;
   height:0px;
   border-bottom:100px solid red;
   border-right:200px solid transparent;

}
/*左下三角形*/
.tirangle-right-down{
   width:0px;
   height:0px;
   border-bottom:100px solid red;
   border-left:200px solid transparent;

}
/*平行四边形*/
.parallelogram {
    width:150px;
    height:100px;
     margin-left:20px;
    -webkit-transform: skew(20deg);
       -moz-transform: skew(20deg);
         -o-transform: skew(20deg);
}
/*梯形*/
.trapezoid{
   widht:100px;
   height:0px;
   border-bottom: 100px solid  red;
   border-left:50px solid transparent;
   border-right:50px solid transparent;
}
/*六角星*/
.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;
}

/*五角星*/
.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:'';
} 

/*五角大楼*/
.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;
}

/*六边形*/
.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;
}

/*八角形*/
.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;
}

/*爱心*/
.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%;
}     

/*无穷大符号*/
.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);
}           

/*鸡蛋*/
.egg {
   display:block;
   width:126px;
   height:180px;
   background-color:red;
   -webkit-border-radius:63px 63px 63px 63px/108px 108px 72px72px;
   border-radius:       50%   50%  50%  50%  /60%   60%   40%  40%;
}

/*药丸*/
.pill {
  width:0px;
  height:0px;
  border-right:60px solid transparent;
  border-top:60px solid red;
  border-left:60  pxsolid 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;
}

/*提示框*/
.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;
}

/*钻石*/
.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;
}
</style>
</head>
<body>

     <div class="cut-diamond"></div>

</body>
</html>

CSS各种图形绘制,布布扣,bubuko.com

时间： 2024-08-02 11:04:19

CSS各种图形绘制的相关文章

强大的CSS：图形绘制合集，方便你我！

以下这些造型简单的图形都是纯CSS外加一个HTML标签实现的,不少实现以前我介绍过,或者你也知道,但是有些相信你没见过. 1. 正方形实时渲染效果如下: 相关CSS代码: #square { width: 100px; height: 100px; background: red; } 2. 长方形效果: 相关CSS代码: #rectangle { width: 200px; height: 100px; background: red; } 这里推荐一下我的前端学习交流扣qun:73177

CSS：图形绘制合集，方便你我！

iOS：quartz2D绘图（给图形绘制阴影）

quartz2D既可以绘制原始图形,也可以给原始图形绘制阴影. 绘制阴影时,需要的一些参数:上下文.阴影偏移量.阴影模糊系数注意:在对绘制的图形做了绘制阴影处理前,需要先对上下文进行保存,绘制阴影成功后,还要对上下文进行复位.目的是为了不影响后面的绘图操作. 举例的阴影绘制实例如下: 1.自定义一个视图类DemoView,并将控制器的视图关联该自定义类,同时在该定义类中重写- (void)drawRect:(CGRect)rect,将绘制无阴影图形和绘制阴影图形的调用方法写在里面.

【Windows编程】系列第五篇：GDI图形绘制

上两篇我们学习了文本字符输出以及Unicode编写程序,知道如何用常见Win32输出文本字符串,这一篇我们来学习Windows编程中另一个非常重要的部分GDI图形绘图.Windows的GDI函数包含数百个API可供我们使用,本篇把最常用的GDI绘图做一个讲解.GDI可以绘制点.直线曲线.填充封闭区域.位图以及文本,其中文本部分已经在上一篇中将了,请参考[Windows编程]系列第三篇:文本字符输出. 跟前面的GDI对象一样,本篇的这些绘图函数也必须要设备上下文句柄(HDC)作为函数参数,从前文我

JAVA学习之JAVA 2D图形绘制

最近一直没有空写博客,事情比较多,静不下心,事情顺其自然好了,有些事我也不懂为什么会变成现在这样,你以为你付出了你最珍贵的,但或许别人并不喜欢.算了,不多想,顺其自然好了. JAVA在图形绘制方面效率跟不上C++,但是我觉得JAVA也有其在图形方面的一些优势,不过对于大型桌面游戏就不行了,估计连流畅度都不能保证. 下面给出最近写的代码: package draw; import java.awt.*; import javax.swing.*; import java.awt.geom.*; p

第68课基础图形绘制（下）

1. 简易绘图程序 (1)功能需求 ①自由图形绘制 ②基本图形绘制(直线.矩形和椭圆) ③能够选择图形绘制颜色 (2)界面解决方案 ①以QWidget为基类创建绘图主窗口 ②使用QGroupBox创建图形设置区域 ③使用单选按钮QRadioBox实现目标图形的选择 ④使用组合框QCombox实现绘图颜色的选择 2. 自由绘图的实现 (1)自由绘图的本质是跟踪鼠标的移动轨迹:因此,必须考虑什么时候开始?什么时候结束?以及如何记录鼠标移动? (2)从绘图参数的角度,可以将己经绘制结束的图形与正在绘制

Quartz2D－－iOS下的图形绘制

一.基本介绍 Quartz 2D是一个二维绘图引擎,Quartz 2D的API是C语言,来自CoreGraphics框架,没有面向对象的思想. 1.作用:绘制图形:线条.三角形.矩形.圆.弧等绘制文字绘制.生成图片(图形) 读取.生成PDF 截图.裁剪图片自定义UI控件 2.图形上下文(Graphics Context):是一个CGContextRef类型的数据图形上下文的作用:1.保存绘图信息.绘图状态 2.决定绘制的输出目标(绘制到什么地方,输出目标可以是PDF文件.Bitmap或者

图形绘制-线段绘制相关

最近公司的项目要用到一些图表效果,本来也打算在github上找一些第三方.然而第三方的风格与公司的需求不尽相同,改动起来较麻烦.于是自己写了一个,并且通用化,现已共享至github上.一下是自己的一些开发历程. 1.刚起手的时候,想完全用Quartz2D来绘制,然而Quartz2D只能绘制一些基本的图形,并不能达到路径绘制的动画效果.想要完全用UIBezierPath(UIBezierPath实际上也是使用OC语法将Quartz2D封装而成,使用更加方便)绘制,有觉得大材小用了,最终觉得使用Qu

13个JavaScript图表（JS图表）图形绘制插件【转】

现在网络上又有越来越多的免费的(JS 图表)JavaScript图表图形绘制插件.我之前给一家网站做过复杂的图形,我们用的是 highchart.在那段时间,没有很多可供选择的插件.但现在不同了,很容易就可以找到很多功能非常不错的图表库.个人而言,此类插件的上升,是因为: 1. Flash 过去是最佳解决方案,但很多人多在从那迁移: 2. 现代浏览器及其更强大的计算能力,使其在转化绘制实时数据方面的能力更佳: 3. 绘制矢量图的不同技术愈发成熟:VML.SVG 和 Canvas. 当然了,你需要