CSS 魔法系列：纯 CSS 绘制图形（各种形状的钻石）

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

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

您可能感兴趣的相关文章

35个让人惊讶的 CSS3 动画效果演示
Web 前沿：一组极其绚丽的 CSS3 效果
Web 前沿：那些让人惊叹的 CSS3 应用
十款精心挑选的在线 CSS3 代码生成工具
年度盛宴：2012年最精彩的 CSS3 教程

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

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

}

您可能感兴趣的相关文章

CSS3 在网页设计中的20佳惊艳应用
推荐12个漂亮的 CSS3 按钮实现方案
推荐10个非常优秀的 CSS3 开发工具
分享50个漂亮的 CSS3 最佳应用示例
24款非常实用的 CSS3 工具终极收藏

本文链接：百变 CSS 系列：纯 CSS 绘制三角形（各种方向）

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

<!--
#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: '';
}
-->


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






<!--
#yin-yang {
width: 96px;
height: 48px;
background: #eee;
border-color: red;
border-style: solid;
border-width: 2px 2px 50px 2px;
border-radius: 100%;
position: relative;
}

#yin-yang:before {
content: "";
position: absolute;
top: 50%;
left: 0;
background: #eee;
border: 18px solid red;
border-radius: 100%;
width: 12px;
height: 12px;
}

#yin-yang:after {
content: "";
position: absolute;
top: 50%;
left: 50%;
background: red;
border: 18px solid #eee;
border-radius:100%;
width: 12px;
height: 12px;
}
-->
<!--
#badge-ribbon {
position: relative;
background: red;
height: 100px;
width: 100px;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
}

#badge-ribbon:before,
#badge-ribbon:after {
content: '';
position: absolute;
border-bottom: 70px solid red;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
top: 70px;
left: -10px;
-webkit-transform: rotate(-140deg);
-moz-transform: rotate(-140deg);
-ms-transform: rotate(-140deg);
-o-transform: rotate(-140deg);
}

#badge-ribbon:after {
left: auto;
right: -10px;
-webkit-transform: rotate(140deg);
-moz-transform: rotate(140deg);
-ms-transform: rotate(140deg);
-o-transform: rotate(140deg);
}
-->
<!--
#space-invader{

box-shadow:
0 0 0 1em red,
0 1em 0 1em red,
-2.5em 1.5em 0 .5em red,
2.5em 1.5em 0 .5em red,
-3em -3em 0 0 red,
3em -3em 0 0 red,
-2em -2em 0 0 red,
2em -2em 0 0 red,
-3em -1em 0 0 red,
-2em -1em 0 0 red,
2em -1em 0 0 red,
3em -1em 0 0 red,
-4em 0 0 0 red,
-3em 0 0 0 red,
3em 0 0 0 red,
4em 0 0 0 red,
-5em 1em 0 0 red,
-4em 1em 0 0 red,
4em 1em 0 0 red,
5em 1em 0 0 red,
-5em 2em 0 0 red,
5em 2em 0 0 red,
-5em 3em 0 0 red,
-3em 3em 0 0 red,
3em 3em 0 0 red,
5em 3em 0 0 red,
-2em 4em 0 0 red,
-1em 4em 0 0 red,
1em 4em 0 0 red,
2em 4em 0 0 red;

background: red;
width: 1em;
height: 1em;
overflow: hidden;

margin: 50px 0 70px 65px;
}
-->

<!--
#chevron {
position: relative;
text-align: center;
padding: 12px;
margin-bottom: 6px;
height: 60px;
width: 200px;
}

#chevron:before {
content: '';
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 51%;
background: red;
-webkit-transform: skew(0deg, 6deg);
-moz-transform: skew(0deg, 6deg);
-ms-transform: skew(0deg, 6deg);
-o-transform: skew(0deg, 6deg);
transform: skew(0deg, 6deg);
}
#chevron:after {
content: '';
position: absolute;
top: 0;
right: 0;
height: 100%;
width: 50%;
background: red;
-webkit-transform: skew(0deg, -6deg);
-moz-transform: skew(0deg, -6deg);
-ms-transform: skew(0deg, -6deg);
-o-transform: skew(0deg, -6deg);
transform: skew(0deg, -6deg);
}
-->

CSS 魔法系列：纯 CSS 绘制图形（各种形状的钻石）

Infinity

Diamond Square

Diamond Shield

Diamond Narrow

Cut Diamond

CSS 魔法系列：纯 CSS 绘制图形（各种形状的钻石）的相关教程结束。

相关推荐

CSS绘制虚线的方案

从0开发3D引擎（九）：实现最小的3D程序-“绘制三角形”

【Python笔记】第二章Python基本图形绘制

[python] 基于wordcloud库绘制词云图

[python] 基于diagrams库绘制系统架构图

4.View绘制分析笔记之onDraw

一个 Qt 显示图片的控件（继承QWidget，使用QPixmap记录图像，最后在paintEvent进行绘制，可缩放）

体绘制（Volume Rendering）概述之4：光线投射算法（Ray Casting）实现流程和代码（基于CPU的实现）