CSS 圆角，三角，五角星，五边形，爱心椭圆，对话框、八卦 Party

最初接触css时，对于一些特殊形状的图标、形状等总是习惯性的切图。从现在开始了解下如何编写不规则形状样式吧...

||下图中的样式都有对应的CSS样式哦

=============================================================================

红色竖线的css样式：

选择器:before{
  content:‘\0020‘;
  display:inline-block;
  height:25px;
  width:3px;
  background-color:#fc4e5a;
  margin-right:12px;
  vertical-align:middle;
  margin-left:5px;
}

==============================================================================

<style>
  #d1{
    position:relative;
  }
  #d1:before {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border: inset 6px;
    border-color: transparent transparent #ff00ff transparent;
    border-bottom-style: solid;
    position: absolute;
    top: -12px;
    left: 10px;
    z-index: 89;
  }
</style>
<div id="d1"></div>

简单图形

/*矩形*/
#Rectangle{
  width:100px;
  height:50px;
  background-color: red;
}
/*正方形*/
#square{
  width:100px;
  height:100px;
  background-color: red;
}
/*实心圆*/
#perfect-circle{
  width:100px;
  height:100px;
  -webkit-border-radius:50%;
  -moz-border-radius:50%;
  border-radius:50%;
  background-color: red;
}
/*圆环*/
#circle{
  width:100px;
  height:100px;
  -webkit-border-radius:50%;
  -moz-border-radius:50%;
  border-radius:50%;
  border:3px red solid;
}
/*椭圆*/
#ellipse{
  width: 200px;
  height: 100px;
  -webkit-border-radius:50%;
  -moz-border-radius:50%;
  border-radius:50%;
  background-color: red;
}

三角图形

/*上三角*/
#triangle-up{
  width: 0px;
  height: 0px;
  border-left:50px solid transparent;
  border-right:50px solid transparent;
  border-bottom:50px solid red;
}
/*下三角*/
#triangle-down{
  width:0px;
  height:0px;
  border-left:50px solid transparent;
  border-right:50px solid transparent;
  border-top:50px solid red;
}
/*左三角*/
#triangle-left{
  width:0;
  height:0;
  border-top:50px solid transparent;
  border-bottom:50px solid transparent;
  border-right:50px solid red;
}
/*右三角*/
#triangle-right{
  width:0;
  height:0;
  border-top:50px solid transparent;
  border-bottom:50px solid transparent;
  border-left:50px solid red;
}
/*左顶*/
#triangle-topleft{
  width:0;
  height:0;
  border-top:100px solid red;
  border-right:100px solid transparent;
}
/*右顶*/
#triangle-topright{
  width:0;
  height:0;
  border-top:100px solid red;
  border-left:100px solid transparent;
}
/*右底*/
#triangle-bottomright{
  width:0;
  height:0;
  border-bottom:100px solid red;
  border-left:100px solid transparent;
}
/*左底*/
#triangle-bottomleft{
  width:0;
  height:0;
  border-bottom:100px solid red;
  border-right:100px solid transparent;
}

CSS3+拼接图

/*平行四边形*/
#parallelogram{
  width:200px;
  height:150px;
  margin-left:30px;
  -webkit-transform:skew(-30deg);
  -moz-transform:skew(-30deg);
  -ms-transform:skew(-30deg);
  -o-transform:skew(-30deg);
  transform:skew(-30deg);
  background-color:red;
}
/*梯形*/
#trapezoid{
  border-bottom:100px solid red;
  border-left:50px solid transparent;
  border-right:50px solid transparent;
  width:100px;
  height:0px;
}
/*五角星*/
#star-five{
  width:0;
  height:0;
  color:red;
  margin:50px 0;
  position:relative;
  disply:block;
  border-left:100px solid transparent;
  border-right:100px solid transparent;
  border-bottom:70px solid red;
  -webkit-transform:rotate(35deg);
  -moz-transform:rotate(35deg);
  -ms-transform:rotate(35deg);
  -o-transform:rotate(35deg);
  transform:rotate(35deg);
}
#star-five:before{
  content:"";
  width:0;
  height:0;
  border-left:30px solid transparent;
  border-right:30px solid transparent;
  border-bottom:80px solid green;
  position:absolute;
  top:-45px;
  left:-65px;  color:white;
  display:block;
  -webkit-transform:rotate(-35deg);
  -moz-transform:rotate(-35deg);
  -ms-transform:rotate(-35deg);
  -o-transform:rotate(-35deg);
  transform:rotate(-35deg);
}
#star-five:after{
  content:"";
  width:0;
  height:0;
  display:block;
  position:absolute;
  color:red;
  top:5px;
  left:-108px;
  border-left:100px solid transparent;
  border-right:100px solid transparent;
  border-bottom:70px solid blue;
  -webkit-transform:rotate(-70deg);
  -moz-transform:rotate(-70deg);
  -ms-transform:rotate(-70deg);
  -o-transform:rotate(-70deg);
  transform:rotate(-70deg);
}
 /*六角星*/
#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:before{
  content:"";
  width:0;
  height:0;
  border-top:100px solid green;
  border-left:50px solid transparent;
  border-right:50px solid transparent;
  position:absolute;
  top:30px;
  left:-50px;
}

正N边形

/*五边形*/
#pentagon{
  width:54px;
  position:relative;
  border-width: 50px 18px 0;
  border-style:solid;
  border-color:red transparent;
}
#pentagon:before{
  content:"";
  position:absolute;
  width:0;
  height:0;
  top:-85px;
  left:-18px;
  border-width:0 45px 35px;
  border-style:solid;
  border-color:transparent transparent blue;
}
/*六边形*/
#hexagon{
  width:100px;
  height:55px;
  background-color: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 blue;
}
#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 green;
}
/*八边形*/
#octagon{
  width:100px;
  height:100px;
  background-color:red;
  position:relative;
}
#octagon:before{
  width:43px;
  height:0;
  top:0;
  left:0;
  position:absolute;
  content:"";
  border-left:29px solid #eee;
  border-right:29px solid #eee;
  border-bottom:29px solid green;
}
#octagon:after{
  width:43px;
  height:0;
  left:0;
  bottom:0;
  position:absolute;
  content:"";
  border-left:29px solid #eee;
  border-right:29px solid #eee;
  border-top:29px solid blue;
}

特殊图形

/*心形*/
#heart{
  width:100px;
  height:90px;
  position:relative;
}
#heart:before,#heart:after{
  width:50px;
  height:80px;
  left:50px;
  position:absolute;
  background-color:#ff00ff;
  content:"";
  -webkit-border-radius:50px 50px 0 0;
  -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{
  background-color:red;
  left:1px;
  -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%;
}
/*睡觉的8*/
#infinity{
  width:212px;
  height:100px;
  position:relative;
}
#infinity:before,#infinity:after{
  width:60px;
  height:60px;
  top:0;
  left:0;
  border:20px solid red;
  position:absolute;
  content:"";
  -webkit-border-radius:50px 50px 0 50px;
  -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;
  -webkit-border-radius:50px 50px 50px 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{
  width:126px;
  height:180px;
  background-color:#ebc7af;
  display:block;
  -webkit-border-radius:50% 50% 50% 50%/60% 60% 40% 40%;
  -moz-border-radius:50% 50% 50% 50%/60% 60% 40% 40%;
  border-radius:50% 50% 50% 50%/60% 60% 40% 40%;
}
/*食人鱼*/
#pacman{
  width:0;
  height:0;
  border:60px solid red;
  border-right:60px solid #fff;
  border-top-left-radius:60px;
  border-top-right-radius:60px;
  border-bottom-left-radius:60px;
  border-bottom-right-radius:60px;
}
/*对话框*/
#talkbubble{
  padding:10px 15px;
  color:#333;
  font-size:12px;
  background-color:lightgreen;
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
  border-radius:5px;
  border:1px solid #aaa;
  position:relative;
}
#talkbubble:before{
  width:0;
  height:0;
  right:100%;
  top:50%;
  margin-top:-8px;
  position:absolute;
  content:"";
  border-top:8px solid transparent;
  border-right:10px solid lightgreen;
  border-bottom:8px solid transparent;
  z-index:100;
}
#talkbubble:after{
  width:0;
  height:0;
  right:100%;
  top:50%;
  margin-top:-8px;
  margin-right:1px;
  position:absolute;
  content:"";
  border-top:8px solid transparent;
  border-right:10px solid #aaa;
  border-bottom:8px solid transparent;
  z-index:50;
}
/*钻石*/
#diamond{
  width:50px;
  height:0;
  border-style:solid;
  border-color:transparent transparent red transparent;
  border-width:0 25px 25px 25px;
  position:relative;
  margin:20px 0 50px 0;
}
#diamond:after{
  width:0;
  height:0;
  top:25px;
  left:-25px;
  border-style:solid;
  border-color:red transparent transparent transparent;
  border-width:70px 50px 0 50px;
  position:absolute;
  content:"";
}
/*阴阳圈*/
#yin-yang{
  width:96px;
  height:48px;
  background-color:#fff;
  border-color:#000;
  border-style:solid;
  border-width:2px 2px 50px 2px;
  -webkit-border-radius:100%;
  -moz-border-radius:100%;
  border-radius:100%;
  position:relative;
}
#yin-yang:before{
  width:12px;
  height:12px;
  top:50%;
  left:0;
  content:"";
  position:absolute;
  background-color:#fff;
  border:18px solid #000;
  -webkit-border-radius:100%;
  -moz-border-radius:100%;
  border-radius:100%;
}
#yin-yang:after{
  width:12px;
  height:12px;
  top:50%;
  right:0;
  content:"";
  position:absolute;
  background-color:#000;
  border:18px solid #fff;
  -webkit-border-radius:100%;
  -moz-border-radius:100%;
  border-radius:100%;
}
时间： 2025-01-13 02:12:00

CSS 圆角，三角，五角星，五边形，爱心椭圆，对话框、八卦 Party的相关文章

CSS border三角、圆角图形生成技术简介

http://www.zhangxinxu.com/wordpress/?p=794 一.前言 利用CSS的border属性可以生成一些图形,例如三角或是圆角.纯粹的CSS2的内容,没有兼容性的问题,我之前在纯CSS实现各类气球泡泡对话框效果一文中算是比较详细的讲述了CSS border属性生成三角的原理,以及实例.我觉得此技术相当实用的,故本文再次简单叙述一下,另外,本文还将展示可能并不为众人所知的CSS border圆角生成技术.好了,裹脚布的话就不说了,直接进入正题. 二.CSS bord

收获2.css圆角总结

css圆角想必大家再熟悉不过了,下面分享一些我知道的,你有可能不知道的知识~~~~ 使用圆角有以下几种方法 1.切图 将四个圆角切图,将父元素设置relative,将四个角通过absolute定位到固定位置,在父元素不设置高宽时,是可以自适应的,这种方法想必大多数人都知道 就不再废话了. 如果需要兼容ie,那么此方法是最好的选择了. 2.像素画 使用html+css2.0绘制圆角弧度 HTML代码 <div class="wrap"> <div class="

CSS圆角效果 -webkit-border-radius(CSS3中border-radius隐藏的威力)

CSS圆角效果 -webkit-border-radius(CSS3中border-radius隐藏的威力) 来源:互联网 作者:佚名 时间:03-28 14:17:14 [大 中 小] border-radius:用这个属性能实现圆角边框的效果.现在只有Mozilla/Firefox 和 Safari 3支持该属性. -webkit-border-radius:苹果:谷歌,等一些浏览器认,因为他们都用的是webkit内核: -moz-border-radius:moz这个属性 主要是专门支持M

css圆角矩形属性

-webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; css圆角矩形属性,布布扣,bubuko.com

css简单实现五角星评分、点赞收藏、展示评分（半颗星、1/3颗星）

1.前言 之前做的好几个项目中,都会遇到打分,评分,点赞这样的需求,写了很多次,每次需要再写的时候,就会翻出之前写过的代码,然后copy过来.总觉得这样的话没有进步,没有把知识放进脑袋里,所以,自己花了2个小时,把这三种类型的需求自己写了demo并做了演示,这样的话,感觉一字一字敲出来的代码,确实是到了脑袋里了.之前一直崇尚写简单的博客,也将五角星评分.点赞收藏.展示评分写成了三个简单的博客,奈何博客园要求博客要有篇幅,所以我的那三篇博客并没有上到博客园首页,但是我觉得这个方法应该让更多的小伙伴

纯CSS小三角制作

无关的知识点 ① background-clip 属性规定背景的绘制区域. 1.padding-box:从padding区域(不含padding)开始向外裁剪背景. 2.border-box:从border区域(不含border)开始向外裁剪背景. 3.content-box:从content区域开始向外裁剪背景. 4.text:从前景内容的形状(比如文字)作为裁剪区域向外裁剪,如此即可实现使用背景作为填充色之类的遮罩效果. ② clip auto:对象无剪切rect(<number>|aut

css圆角特效

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>css圆角特效</title> <style> div{ text-align: center; font-size: 32px; width: 100px; color: white; padding: 10px; margin: 10px; -webkit-border-radiu

CSS圆角样式

CSS圆角: #top2 { margin-left:20px; padding:10px; width:600px; height:300px; border: 5px solid #ff6600; -moz-border-radius: 15px; /* Gecko browsers */ -webkit-border-radius: 15px; /* Webkit browsers */ border-radius:15px; /* W3C syntax */ /* •-moz(例如 -m

HTML5 纯css圆角代码

<html> <head> <title>河北礼品公司</title> </head> <style> #test { border:1px solid #ccc; background:#fff; padding:10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; } </style> <body>

纯css圆角边框

第一章.基本的圆角框 原创:冰极峰 转载请注明出处 2009年11月30日10:19:34 文章导航: 第一章:基本的圆角框 第二章:透明圆角化背景图片 第三章:圆角化图片 第四章:CSS圆角框组件 V1.0 序言:在我的文章<超圆滑圆角框的半完美解决方案>中已经总结了七种不同的圆角框解决方案,基本上总结完了目前网络上比较流行的圆角框实现方案.而在我的另一篇文章<无图片山顶角>中又是一个另类的实现方法. 纯CSS实 现圆角框是一件大家都说烂了的事件,我也写过两篇总结文章,为什么还会