News Contents
信息中心

纯CSS实现斜角

发表日期:2018/9/13      浏览次数:

今天看了看腾讯的七周年时光轴,发现这个斜角的CSS,研究了半天提出下面代码可以直接实现斜角,不是CSS3哦,那个就太容易了 

-webkit-transform:rotate(10deg); 

倾斜度后再隐藏直接就可以了,下面要说的更方便实现:

 

 


 
  1. <style type="text/css">

  2. .dot {

  3. font-size: 0;

  4. line-height: 0;

  5. border-width: 10px;

  6. border-color: red;

  7. border-left-width: 0;

  8. border-style: dashed;

  9. border-right-style: solid;

  10. border-top-color: transparent;

  11. border-bottom-color: transparent;

  12. }

  13. </style>

  14. <span class="dot"></span>


效果如下:边缘很清晰的斜角,比做图弄出来的好多了

 

另外我后来发现通过设置不同方向边线宽度,还可以调整斜角的角度,这个很简单大家自己修改尝试下吧就不赘述啦

----------------------------------------------------------------

一、样式

.polygon{

float:left;

width:100px;

height:100px;

background-color:#000;

shape-outside:polygon(100px 0,100px 80px,0px 80px);

-webkit-clip-path:polygon(100px 0,100px 80px,0px 80px);

}

二、div

<div class="polygon"></div>

盛大建站承接个人、公司、企业的网站建设、网页设计、网店制作、独立商城制作、外贸网站制作,也承接同行介绍的业务,欢迎联系!
本站承接主要业务如下:
1、提供免备案虚拟主机(网站空间),有独立国内服务器、高速美国服务器、香港服务器、韩国服务器、日本服务器,>> http://www.fuanxx.com
2、网站建设:个人网店制作、企业建站、公司网站、新闻、下载等;论坛、博客网站搭建,承接外贸英文站制作
3、承接阿里巴巴、京东、淘宝、天猫等的商品数据采集
4、网站防钓鱼,可以过360、QQ、搜狗、金山、微信拦截
5、要就发IP网站限制访问系统,防止同行抄袭并保障海外客户访问不受影响,>> http://www.198ip.com
十年如一日,我们专注于提供高品质 定制网站建设服务!
您的信任,我们的责任,期待与您的合作!