网创优客建站品牌官网
为成都网站建设公司企业提供高品质网站建设
热线:028-86922220
成都专业网站建设公司

定制建站费用3500元

符合中小企业对网站设计、功能常规化式的企业展示型网站建设

成都品牌网站建设

品牌网站建设费用6000元

本套餐主要针对企业品牌型网站、中高端设计、前端互动体验...

成都商城网站建设

商城网站建设费用8000元

商城网站建设因基本功能的需求不同费用上面也有很大的差别...

成都微信网站建设

手机微信网站建站3000元

手机微信网站开发、微信官网、微信商城网站...

建站知识

当前位置:首页 > 建站知识

怎么用纯css绘制各种图形-创新互联

本篇内容主要讲解“怎么用纯css绘制各种图形”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“怎么用纯css绘制各种图形”吧!

创新互联一直在为企业提供服务,多年的磨炼,使我们在创意设计,营销型网站建设到技术研发拥有了开发经验。我们擅长倾听企业需求,挖掘用户对产品需求服务价值,为企业制作有用的创意设计体验。核心团队拥有超过十多年以上行业经验,涵盖创意,策化,开发等专业领域,公司涉及领域有基础互联网服务成都移动云计算中心成都app开发、手机移动建站、网页设计、网络整合营销。

1、  向上三角形

怎么用纯css绘制各种图形

CSS核心代码

.triangle-up {

  width: 0;

  border-left: 50px solid transparent;

  border-right: 50px solid transparent;

  border-bottom: 100px solid red;

}

2、  左上三角形

怎么用纯css绘制各种图形

CSS核心代码

.triangle-topleft {

  width: 0;

  border-top: 100px solid red;

  border-right: 100px solid transparent;

}

3、  弧形尾箭头

怎么用纯css绘制各种图形

CSS核心代码

.curvedarrow {

  position: relative;

  width: 0;

  border-top: 90px solid transparent;

  border-right: 90px solid red;

  transform: rotate(10deg) translateX(100%);

}

.curvedarrow:after {

  content: "";

  position: absolute;

  border: 0 solid transparent;

  border-top: 30px solid red;

  border-radius: 200px 0 0 0;

  top: -120px; left: -90px;

  width: 120px; height: 120px;

  transform: rotate(45deg);

}

4、  吃豆人

怎么用纯css绘制各种图形

CSS核心代码:

.pacman {

  width: 0px; height: 0px;

  border-right: 60px solid transparent;

  border-top: 60px solid red;

  border-left: 60px solid red;

  border-bottom: 60px solid red;

  border-top-left-radius: 60px;

  border-top-right-radius: 60px;

  border-bottom-left-radius: 60px;

  border-bottom-right-radius: 60px;

}

5、  带尖角的说话泡泡

怎么用纯css绘制各种图形

CSS核心代码:

.talkbubble {

  width: 120px; height: 80px;

  background: red;

  position: relative;

  border-radius: 10px;

}

.talkbubble:before {

  content: "";

  position: absolute;

  right: 100%; top: 26px;

  border-top: 13px solid transparent;

  border-right: 26px solid red;

  border-bottom: 13px solid transparent;

}

6、bilibili电视机

怎么用纯css绘制各种图形

CSS核心代码

.tv {

  position: relative;

  width: 200px; height: 150px;

  margin: 20px 0;

  background: red;

  border-radius: 50% / 10%;

  color: white;

  text-align: center;

  text-indent: .1em;

}

.tv:before {

  content: '';

  position: absolute;

  top: 10%; bottom: 10%; right: -5%; left: -5%;

  background: inherit;

  border-radius: 5% / 50%;

}

7、放大镜

怎么用纯css绘制各种图形

.magnifying-glass {

  font-size: 10em;

  display: inline-block;

  width: 0.4em; height: 0.4em;

  border: 0.1em solid red;

  position: relative;

  border-radius: 0.35em;

}

.magnifying-glass:before {

  content: "";

  display: inline-block;

  position: absolute;

  right: -0.25em; bottom: -0.1em;

  border-width: 0;

  background: red;

  width: 0.35em; height: 0.08em;

  transform: rotate(45deg);

}

8、长长的指向图形

怎么用纯css绘制各种图形

CSS核心代码:

.pointer {

  width: 200px; height: 40px;

  position: relative;

  background: red;

}

.pointer:after {

  content: "";

  position: absolute;

  left: 0; bottom: 0;

  border-left: 20px solid white;

  border-top: 20px solid transparent;

  border-bottom: 20px solid transparent;

}

.pointer:before {

  content: "";

  position: absolute;

  right: -20px; bottom: 0;

  border-left: 20px solid red;

  border-top: 20px solid transparent;

  border-bottom: 20px solid transparent;

}

最后还是要跟小伙伴们强调一下,由于部分图形效果使用了CSS3的部分属性,如果你还在使用IE的话,我建议你使用现代浏览器,比如:Mozilla Firefox、Google Chrome、Safari、Opera。上面展示的效果可能部分实用性不大,但是使用css制作三角和圆有效果应用还是很多了,特别是用来制作tips效果。

到此,相信大家对“怎么用纯css绘制各种图形”有了更深的了解,不妨来实际操作一番吧!这里是创新互联网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!

另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。


网站标题:怎么用纯css绘制各种图形-创新互联
文章来源:http://bjjierui.cn/article/ggepp.html

其他资讯