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

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

1万

主题

1万

帖子

3万

积分

论坛元老

Rank: 8Rank: 8

积分
35068
发表于 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;
}
回复

使用道具 举报

企业网站建设最新相关资讯推荐
营销型网站与普通网站的区别
在几年前,大部分的企业网站是以展示型网站为主,但是随着这几年电子商务的发展,营销型网站慢慢成为了企业建站的主流,大家可以看一下易捷科技给浪陀(Rlongtou)钟表(深圳)有限公司制作的营销型网站,浪陀钟表是一家集研发、设计、加工为一体的高端奢侈品制造企业,展示型网站已经完全不能满足企业的需求,易捷根据企业

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

本版积分规则

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