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

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

1万

主题

1万

帖子

3万

积分

论坛元老

Rank: 8Rank: 8

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

使用道具 举报

企业网站建设最新相关资讯推荐
营销型网站特点有哪些
互联网的快速发展,不管是什么企业,都会建立一个属于自i的网站。那么对于营销型网站建设,它都具有哪些特点呢?下面深圳网站设计公司易捷来给您分享下。 何为营销型网站?营销型网站是指以现代网络营销理念为核心,基于企业营销目标进行站点规划,具有良好搜索引擎表现和用户体验、完备的效果评估体系,能够有效利用多种手

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

本版积分规则

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