安科网

css绘图

语帆

语帆

2016-07-13

关注 关注

1.border绘图

原理归纳：疑似找到box中点，当邻边同样有外边距时，沿两边框长度形成的角度发射线向外绘制三角形得到每一条边上的外边距，同时形成圆角。

原理演绎：暂无浏览器渲染原理、C++造诣。

css绘图

 .border {

  width:0px;

  height:0px;

  border: 50px solid;

  border-color: #7cb5ec #8085e8 #90ed7d #f7a35c;

}


css绘图
 .border {

  width:0px;

  height:0px;

  border: 50px solid;

  border-color: #7cb5ec transparent transparent transparent;

}


css绘图
 .border {

  width: 0; 

  height:0;

  border-top: 50px solid #7cb5ec;

  border-right: 50px solid #8085e8;

  border-left: 50px solid #90ed7d;

}

浏览器无显示输出

.border {

  width: 0; 

  height:0;

  border-top: 40px solid #ADFF2F;

  border-bottom: 40px solid #FF0000;

}

延伸：

css绘图

#star-six {

    width: 0;

    height: 0;

    border-left: 50px solid transparent;

    border-right: 50px solid transparent;

    border-bottom: 100px solid #7cb5ec;

    position: relative;

}

#star-six:after {

    width: 0;

    height: 0;

    border-left: 50px solid transparent;

    border-right: 50px solid transparent;

    border-top: 100px solid #7cb5ec;

    position: absolute;

    content: "";

    top: 30px;

    left: -50px;

}


css绘图

#star-five {

   margin: 50px 0;

   position: relative;

   display: block;

   color: #7cb5ec;

   width: 0px;

   height: 0px;

   border-right:  100px solid transparent;

   border-bottom: 70px  solid #7cb5ec;

   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 #7cb5ec;

   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: #7cb5ec;

   top: 3px;

   left: -105px;

   width: 0px;

   height: 0px;

   border-right: 100px solid transparent;

   border-bottom: 70px solid #7cb5ec;

   border-left: 100px solid transparent;

   -webkit-transform: rotate(-70deg);

   -moz-transform:    rotate(-70deg);

   -ms-transform:     rotate(-70deg);

   -o-transform:      rotate(-70deg);

   content: '';

}


css绘图
 #hexagon {

    width: 100px;

    height: 55px;

    background: #7cb5ec;

    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 #7cb5ec;

}

#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 #7cb5ec;

}

 
css绘图
 #heart {

    position: relative;

    width: 100px;

    height: 90px;

}

#heart:before,

#heart:after {

    position: absolute;

    content: "";

    left: 50px;

    top: 0;

    width: 50px;

    height: 80px;

    background: #7cb5ec;

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

} 

css绘图
 #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 #7cb5ec;

    -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: 70px;

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

}

css绘图
 #egg {

   display:block;

   width: 126px; 

   height: 180px;

   background-color: #7cb5ec;

   -webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px;

   border-radius:        50%   50%  50%  50%  / 60%   60%   40%  40%;

}

css绘图
 #pacman {

  width: 0px;

  height: 0px;

  border-right: 60px solid transparent;

  border-top: 60px solid #7cb5ec;

  border-left: 60px solid #7cb5ec;

  border-bottom: 60px solid #7cb5ec;

  border-top-left-radius: 60px;

  border-top-right-radius: 60px;

  border-bottom-left-radius: 60px;

  border-bottom-right-radius: 60px;

}


css绘图
 #talkbubble {

   width: 120px; 

   height: 80px; 

   background: #7cb5ec;

   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: 18px solid #7cb5ec;

   border-bottom: 13px solid transparent;

}

css绘图
 #burst-12 {

    background: #7cb5ec;

    width: 80px;

    height: 80px;

    position: relative;

    text-align: center;

}

#burst-12:before, #burst-12:after {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    height: 80px;

    width: 80px;

    background: #7cb5ec;

}

#burst-12:before {

    -webkit-transform: rotate(30deg);

       -moz-transform: rotate(30deg);

        -ms-transform: rotate(30deg);

         -o-transform: rotate(30deg);

            transform: rotate(30deg);

}

#burst-12:after {

    -webkit-transform: rotate(60deg);

       -moz-transform: rotate(60deg);

        -ms-transform: rotate(60deg);

         -o-transform: rotate(60deg);

            transform: rotate(60deg);

}

进阶：

气泡框

css绘图
 .triangle-isosceles {

  position:relative;

  padding:15px;

  margin:1em 0 3em;

  width: 400px;

  color:#fff;

  background:#f3961c; /* default background for browsers without gradient support */

  /* css3 */

  background:-webkit-gradient(linear, 0 0, 0 100%, from(#2e88c4), to(#075698));

  background:-moz-linear-gradient(#2e88c4, #075698);

  background:-o-linear-gradient(#2e88c4, #075698);

  background:linear-gradient(#2e88c4, #075698);

  -webkit-border-radius:10px;

  -moz-border-radius:10px;

  border-radius:10px;

}

.triangle-isosceles:after {

  content:"";

  position:absolute;

  bottom:-15px; /* value = - border-top-width - border-bottom-width */

  left:50px; /* controls horizontal position */

  border-width:15px 15px 0; /* vary these values to change the angle of the vertex */

  border-style:solid;

  border-color:#075698 transparent;

  /* reduce the damage in FF3.0 */

  display:block;

  width:0;

}


css绘图
 .triangle-border {

  position:relative;

  padding:15px;

  margin:1em 0 3em;

  border:5px solid #5a8f00;

  color:#333;

  background:#fff;

  /* css3 */

  -webkit-border-radius:10px;

  -moz-border-radius:10px;

  border-radius:10px;

}

.triangle-border:before {

  content:"";

  position:absolute;

  bottom:-20px; /* value = - border-top-width - border-bottom-width */

  left:40px; /* controls horizontal position */

  border-width:20px 20px 0;

  border-style:solid;

  border-color:#5a8f00 transparent;

  /* reduce the damage in FF3.0 */

  display:block;

  width:0;

}

.triangle-border:after {

  content:"";

  position:absolute;

  bottom:-13px; /* value = - border-top-width - border-bottom-width */

  left:47px; /* value = (:before left) + (:before border-left) - (:after border-left) */

  border-width:13px 13px 0;

  border-style:solid;

  border-color:#fff transparent;

  /* reduce the damage in FF3.0 */

  display:block;

  width:0;

}


css绘图

<div class="oval-thought"><p style=“padding:0;margin:0”>nihao</p></div>
 .oval-thought {

  position:relative;

  width:270px;

  padding:50px 40px;

  margin:1em auto 80px;

  text-align:center;

  color:#fff;

  background:#075698;

  /* css3 */

  background:-webkit-gradient(linear, 0 0, 0 100%, from(#2e88c4), to(#075698));

  background:-moz-linear-gradient(#2e88c4, #075698);

  background:-o-linear-gradient(#2e88c4, #075698);

  background:linear-gradient(#2e88c4, #075698);

  /*

  NOTES:

  -webkit-border-radius:220px 120px; // produces oval in safari 4 and chrome 4

  -webkit-border-radius:220px / 120px; // produces oval in chrome 4 (again!) but not supported in safari 4

  Not correct application of the current spec, therefore, using longhand to avoid future problems with webkit corrects this

  */

  -webkit-border-top-left-radius:220px 120px;

  -webkit-border-top-right-radius:220px 120px;

  -webkit-border-bottom-right-radius:220px 120px;

  -webkit-border-bottom-left-radius:220px 120px;

  -moz-border-radius:220px / 120px;

  border-radius:220px / 120px;

}

.oval-thought:before {

  content:"";

  position:absolute;

  bottom:-30px;

  left:50px;

  width:30px;

  height:30px;

  background:#075698;

  /* css3 */

  -webkit-border-radius:30px;

  -moz-border-radius:30px;

  border-radius:30px;

}

.oval-thought:after {

  content:"";

  position:absolute;

  bottom:-40px;

  left:30px;

  width:15px;

  height:15px;

  background:#075698;

  /* css3 */

  -webkit-border-radius:15px;

  -moz-border-radius:15px;

  border-radius:15px;

}

css绘图
 .oval-quotes {

  position:relative;

  width:400px;

  height:350px;

  margin:2em auto 10px;

  color:#fff;

  background:#7cb5ec;

  /* css3 */

  /*

  NOTES:

  -webkit-border-radius:Apx Bpx; // produces oval in safari 4 and chrome 4

  -webkit-border-radius:Apx / Bpx; // produces oval in chrome 4 (again!) but not supported in safari 4

  Not correct application of the current spec, therefore, using longhand to avoid future problems with webkit corrects this

  */

  -webkit-border-top-left-radius:400px 350px;

  -webkit-border-top-right-radius:400px 350px;

  -webkit-border-bottom-right-radius:400px 350px;

  -webkit-border-bottom-left-radius:400px 350px;

  -moz-border-radius:400px / 350px;

  border-radius:400px / 350px;

}

.oval-quotes:before {

  content:"\201C";

  position:absolute;

  z-index:1;

  top:20px;

  left:20px;

  font:80px/1 Georgia, serif;

  color:#7cb5ec;

}

.oval-quotes:after {

  content:"\201D";

  position:absolute;

  z-index:1;

  bottom:0;

  right:20px;

  font:80px/0.25 Georgia, serif;

  color:#7cb5ec;

}

.oval-quotes p {

  width:250px;

  height:250px;

  padding:50px 0 0;

  margin:0 auto;

  text-align:center;

  font-size:35px;

  line-height: 250px;

}

.oval-quotes p:before {

  content:"";

  position:absolute;

  z-index:-1;

  bottom:-30px;

  right:55%;

  width:180px; /* wider than necessary to make it look a bit better in IE8 */

  height:60px;

  background:#fff; /* need this for webkit - bug in handling of border-radius */

  /* css3 */

  -webkit-border-bottom-right-radius:40px 50px;

  -moz-border-radius-bottomright:40px 50px;

  border-bottom-right-radius:40px 50px;

  /* using translate to avoid undesired appearance in CSS2.1-capabable but CSS3-incapable browsers */

  -webkit-transform:translate(-30px, -2px);

  -moz-transform:translate(-30px, -2px);

  -ms-transform:translate(-30px, -2px);

  -o-transform:translate(-30px, -2px);

  transform:translate(-30px, -2px);

}

.oval-quotes p:after {

  content:"";

  position:absolute;

  z-index:-2;

  bottom:-30px;

  right:25%;

  height:80px;

  border-right:200px solid #7cb5ec;

  background:#7cb5ec; /* need this for webkit - bug in handling of border-radius */

  /* css3 */

  -webkit-border-bottom-right-radius:200px 100px;

  -moz-border-radius-bottomright:200px 100px;

  border-bottom-right-radius:200px 100px;

  /* using translate to avoid undesired appearance in CSS2.1-capabable but CSS3-incapable browsers */

  -webkit-transform:translate(0, -2px);

  -moz-transform:translate(0, -2px);

  -ms-transform:translate(0, -2px);

  -o-transform:translate(0, -2px);

  transform:translate(0, -2px);

  /* reduce the damage in FF3.0 */

  display:block;

  width:0;

}

 2.css3-transform，2D/3D转换

transform:none;不作任何转换

transform:translateX(x);平移

transform:translateY(y);

transform:translateZ(z);

transform:translate(x,y);

transform:translate3d(x,y,z);

transform:scaleX(x);缩放

transform:scaleY(y);

transform:scaleZ(z);

transform:scale(x,y);

transform:scale3d(x,y,z);

transform:rotateX(angle);绕X轴旋转，到180°即是垂直翻转

transform:rotateY(angle);

transform:rotateZ(angle);

transform:rotate(angle);默认绕着中心旋转

transform:rotate3d(angle);

transform:skewX(angle);水平方向不变，垂直方向倾斜

transform:skewY(angle);

transform:skew(angle,angle);

transform:matrix(a,b,c,d,e,f);矩阵运算，[[a,c,f],[b,d,e],[0,0,0]]*[[x],[y],[1]]的形式构建新的图形，a、b、c、d约定旋转和缩放，e、f平移

transform:matrix3d(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p);
 

3.css动画-transition

transition: property duration timing-function delay;鼠标移近、点击后触发动画效果

transition-property触发动效的css属性，none为无属性触发，all为全属性触发

transition-duration动画效果持续多少时间

transition-timing-function动效的时间曲线

transition-delay动效开始的时间

transition属性详解：http://www.php100.com/html/webkaifa/DIV_CSS/2012/1029/11403.html

示例：

div{

width:100px;

transition:width 2s;

-webkit-transition:width 2s; /* safari */

}

div:hover{width:300px;}

进阶：随着表单元素获得焦点，聚焦框移动到相应表单元素上

延伸：

鼠标移近后旋转的图片

@keyframes spin {

from { none;} 

to { transform: rotate(360deg);}

}

img {

-webkit-mask-box-image: url(../images/mask.png);

}

img:hover {

animation-name: spin;

animation-duration: 1.5s;

animation-iteration-count: infinite;

animation-direction: ltr;

}

常见图形

按钮

css绘图
 .awesome{

background: #222 url(/images/alert-overlay.png) repeat-x;

display: inline-block;

padding: 5px 10px 6px;

color: #fff;

text-decoration: none;

font-weight: bold;

line-height: 1;

-moz-border-radius: 5px;

-webkit-border-radius: 5px;

-moz-box-shadow: 0 1px 3px #999;

-webkit-box-shadow: 0 1px 3px #999;

text-shadow: 0 -1px 1px #222;

border-bottom: 1px solid #222;

position: relative;

cursor: pointer;

}

/* Sizes ---------- */

.small.awesome {

font-size: 11px;

}

.medium.awesome {

font-size: 13px;

}

.large.awesome {

font-size: 14px;

padding: 8px 14px 9px;

}

/* Colors ---------- */

.blue.awesome {

background-color: #2daebf;

}

.red.awesome {

background-color: #e33100;

}

.magenta.awesome {

background-color: #a9014b;

}

.orange.awesome {

background-color: #ff5c00;

}

.yellow.awesome {

background-color: #ffb515;

}

http://webjx.com/css/divcss-24428.html

http://blog.csdn.net/dojotoolkit/article/details/6859754

http://zurb.com/article/266/super-awesome-buttons-with-css3-and-rgba

http://webdesignerwall.com/tutorials/css3-dropdown-menu

http://www.php100.com/html/webkaifa/DIV_CSS/2012/1029/11403.html

css三角形 border css

语帆

语帆

0 关注 0 粉丝 0 动态

关注 关注

相关推荐

纯css如何绘制三角形_利用border实现画三角形的原理方法

使用css画三角形，首先想到的思路是：利用border边框样式来实现，这是由于border的边框是由四个三角形组成的。这里我们利用transparent的透明颜色来代替。上面实现的三角形都是没有带边框的，如果在需求中需要实现带边框的三角形改如何实现呢？整体

猫沙盆 2020-07-07

用css制作三角形图标

width: 0;height: 0;border-top: 20px solid transparent;border-left: 20px solid transparent;border-right: 20px solid transparent;b

葉無聞 2020-06-09

CSS实现等边三角形

聪明的你应该已经看出来了，border的边框是由四个三角形组成的，接下来我们就使用这一原理来实现等边三角形吧~将其他的三个边框给取消。你或许有个疑问？上右下左的顺序来控制四个边框，隐藏某边框就设置transparent,显示某边框就写个颜色就可以啦~比如上

buttonChan 2020-04-10

CSS利用border绘制图性

width:10px;border-top:10px solid red;border-right:10px solid transparent;border-left:10px solid transparent;border-bottom:10px s

sdbxpjzq 2019-12-03

CSS之 元素显示隐藏，用户界面样式，文本溢出隐藏，精灵技术，三角形

文本域默认右下角是可以拖拽的 ; 可以使用下列预发禁止拖拽 ;有宽度的块级元素居中对齐，是margin: 0 auto;让文字居中对齐，是 text-align: center;vertical-align 不影响块级元素中的内容对齐，它只针对于行内元素或

沈宫新 2020-02-23

每日练习:用css画图形,菱形,四种三角形,实心圆,空心圆

AlisaClass 2019-11-04

利用CSS绘制三角形

<!DOCTYPE html>. width: 0;height: 0;/*border-top: 50px solid blue;border-right: 50px solid red;border-bottom: 50px solid g

sdbxpjzq 2019-11-04

使用css画三角形

当代码时下面这样的时候，不知道你有没有想过出现的图形是什么呢？如果这时候中间的框消失，是不是就构成了四个三角形？？width: 0px; //注意一定要是0而不能不写，不写的话系统默认的长款可能是一整个屏幕，这是出现的就不是三角形了

sdbxpjzq 2019-10-26

CSS画一个三角形

<!DOCTYPEhtml>. <metaname="viewport"content="width=device-width,initial-scale=1.0">. <metahtt

zengni 2019-10-21

[摘录]纯CSS打造箭头对话框效果

首先，先定义一个边框的样式与色彩。由于边框是由内向外画，且会看到个边的接角，正好都是45度角。接着再将宽、高设成0。有没有点感觉啦!这时再把其它边的颜色改成透明。而有了这概念后，就可以开始来制作对话框了。

libowen0 2014-07-08

css盒子模型和一些属性

(x-height 通常是字体尺寸的一半。这段代码是设置了全部的内边距 只不过上右下都设置成了0；绝对定位与浮动float不能同时使用绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。positi

猫沙盆 2017-05-04

使用CSS展示各种形状的三角形

今天带来的是用纯css样式来绘制三角形。很简单的一段代码，只有一个div标签，id为div1。

AnyBisks 2018-01-04

CSS 颜色体系详解

说到 CSS 颜色，相比大家都不会陌生，本文是我个人对 CSS 颜色体系的一个系统总结与学习，分享给大家。先列出目录直观的感受一下与 CSS 颜色相关大概覆盖了哪些内容。它表示一个具体的颜色值，且它不区分大小写。在 CSS3 之前，也就是 CSS2，一共包

zhouguizhi 2018-02-14

实用的利用 CSS + &amp;lt;em&amp;gt;标签 来完成一个三角形的制作

利用 CSS + 标签 来完成一个三角形的制作。[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

ZiXuanFY 2007-04-12

CSS实现8种炫酷按钮

在各种UI组件库大行其道的今天，大家已经很少自己用CSS去实现一些效果了，久而久之CSS的水平也越来越退步，所以有空还是得练练。今天给大家分享8种炫酷按钮的CSS实现。现在的主流是扁平化的设计，拟物化的设计比较少见了，所以我们仅从技术角度去分析如何实现这个

淡风wisdon大大 2019-08-01

单一div的正多边形变换（纯CSS）

上一篇我们介绍了如何利用before和after伪元素来做Material Design风格的按钮，里头关键的技术就在于活用边框宽度和div本体宽高，因此这篇再加码一个效果，就是纯粹利用CSS，让“单一个”div，从正三角形变换为正八边形，最后再搭配动画的

我就是停不下来 2019-07-01

纯CSS Material Design风格按钮

伪元素before和after的应用伪元素在里头扮演相当重要的角色，利用伪元素我们可以产生两个不在HTML里头的类div，可以大幅降低代码的复杂程度。transform的应用CSS里所有的形变都是藉由transform来完成，示例里头会用到scale与ro

jiedinghui 2019-07-01

CSS 实现三角形，非 Hack

写过 HTML upvote arrow，speech bubble或其他类似的尖角元素的人都知道，为了创建一个纯 CSS 实现的三角形，必须使用某些 Hack。最流行的两种方式是通过 边框实现，或 Unicode 字符。不得不说，这些 CSS Hack

wangnantjobj 2019-07-01

CSS 之三角形

<!DOCTYPE html>. border: 50px solid red;width: 0px;height: 0px;border-top-color: green;border-left-color: yellow;border-ri

yongquanx 2019-07-01

CSS中左上朝向三角形(Top-Left Triangle)的几种制作方式

今天我们介绍几种，用css实现左上朝向三角形的写法。}大家可以尝试更多种的三角形做法，以及不同朝向的三角形。这里强烈推荐一个常用css图形的展示网站：https://css-tricks.com/the-sh...Written by：EdenShengE

lanzhusiyu 2019-06-29
语帆

语帆

W3CSchool教程
HTML 教程
CSS 教程
Bootstrap 教程
Javascript 教程
jQuery 教程
后端教程
C 教程
Java 教程
PHP 教程
Python 教程
Go 教程
移动开发
Android 教程
Swift 教程
Kotlin 教程
jQuery Mobile 教程
ionic 教程
关于我们
新闻动态
联系方式
招聘英才
安科实验室
帮助与反馈

安科网(Ancii)，中国第一极客网

Copyright © 2013 - 2019 Ancii.com

京ICP备18063983号 京公网安备11010802014868号