请选择 进入手机版 | 继续访问电脑版
企业网站建设公司-易捷网络科技
企业网站推广优化-易捷网络科技
企业邮箱申请购买-易捷网络科技
域名空间申请备案-易捷网络科技
查看: 329|回复: 0

纯 CSS 绘制图形(各种形状的砖石)

1万

主题

1万

帖子

3万

积分

论坛元老

Rank: 8Rank: 8

积分
35079
发表于 2017-7-4 22:21:00 | 显示全部楼层 |阅读模式
我们的网页因为 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;
}
回复

使用道具 举报

企业网站建设最新相关资讯推荐
企业网站快速提高排名的方法和策略
提高排名估计是每一个做网站的朋友都在想得一件事,提高排名确实不是一件容易的事,当然这些年来,有很多企业网站通过一些其他的手段使自己的网站排到前面,但是这样是坚持不下去的,很快就会被其他真正有实力的网站给挤掉,所以要想提高排名,没有什么捷径可走,我们必须脚踏实地,下面小编就给大家介绍一下关于提高排名的

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

快速回复 返回顶部 返回列表