CSS 魔法系列:纯 CSS 绘制图形(各种形状的钻石)

  我们的网页因为 CSS 而呈现千变万化的风格。这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果。特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来。

  《CSS 魔法系列》继续给大家带来 CSS 在网页中以及图形绘制中的使用。这篇文章给大家带来的是纯 CSS 绘制数学中的各种形状的砖石等。

您可能感兴趣的相关文章

 

Infinity

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

  

Diamond Square

 
 
#diamond {
	width: 0;
	height: 0;
	border: 50px solid transparent;
	border-bottom-color: red;
	position: relative;
	top: -50px;
}
#diamond:after {
	content: '';
	position: absolute;
	left: -50px;
	top: 50px;
	width: 0;
	height: 0;
	border: 50px solid transparent;
	border-top-color: red;
}

  

Diamond Shield

 
 
#diamond-shield {
	width: 0;
	height: 0;
	border: 50px solid transparent;
	border-bottom: 20px solid red;
	position: relative;
	top: -50px;
}
#diamond-shield:after {
	content: '';
	position: absolute;
	left: -50px; top: 20px;
	width: 0;
	height: 0;
	border: 50px solid transparent;
	border-top: 70px solid red;
}

  

Diamond Narrow

 
 
#diamond-narrow {
	width: 0;
	height: 0;
	border: 50px solid transparent;
	border-bottom: 70px solid red;
	position: relative;
	top: -50px;
}
#diamond-narrow:after {
	content: '';
	position: absolute;
	left: -50px; top: 70px;
	width: 0;
	height: 0;
	border: 50px solid transparent;
	border-top: 70px solid red;
}

  

Cut Diamond

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

  

您可能感兴趣的相关文章

 

本文链接:百变 CSS 系列:纯 CSS 绘制三角形(各种方向)

编译来源:梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源

posted @ 2013-11-19 20:29 梦想天空(山边小溪) 阅读(...) 评论(...) 编辑 收藏