一款CSS3制作的带尖角的按钮实例代码-网站相关-魔数师说
首页 更多分类 网站相关 正文

一款CSS3制作的带尖角的按钮实例代码

扫码手机浏览

以下讨论的是和CSS3 尖角 相关的一款CSS3制作的带尖角的按钮实例代码教程文章,内容是本站精心挑选整理的教程,希望对广大的网友给到帮助,下面是详细内容:一个按钮CSS3 返回按钮,带尖角效果,简单的实例演示点击下面运行代码可以查看效果!...

以下讨论的是和CSS3尖角相关的一款CSS3制作的带尖角的按钮实例代码教程文章,内容是本站精心挑选整理的教程,希望对广大的网友给到帮助,下面是详细内容。一个按钮CSS3 返回按钮,带尖角效果,简单的实例!

<style>

 .kele:before
 {
 position: absolute; content: " "; 
 border: transparent 14px solid; border-width: 13px 8px ; 
 border-right-color: #CCC; 
 margin: 1px -16px 0 0; 
 }
 
 .kele
 { 
  position: relative; width: 40px;
  height: 28px; background: #EEE; 
  border-radius: 5px;  
  margin: 30px; 
  text-align: center; 
  line-height: 28px; 
  color: #999; 
  font-size: 14px; 
  border: 1px solid #CCC;
   }

 .kele:after
 {
  position: absolute; content: " "; 
  border: transparent 13px solid;  
  border-width:  12px 8px; 
  border-right-color: #EEE; 
  margin: 2px -15px 0 0; 
  top: 2px; 
  }

</style>

<div class="kele">
<a href="#">返回</a>
</div>


阅读全文

本文转载自互联网或其他渠道,侵删!