Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

利用元素边框重叠斜切原理实现梯形

  元素的边框交界处是被斜切的,所有浏览器上都是。
<!DOCTYPE html>
<style>
div {
  font:14px/24px 微软雅黑;
  text-align:center;
  color:#C30;width:100px;
  border:24px solid;
  border-color:green blue;
}
</style>
<div>次碳酸钴</div>

  看吧,绿色和蓝色的交界处是斜的,如果希望改变它的斜率,可改变边某个边框大小来实现。如果把其它三条边做成透明的,那么我们就能得到梯形。通常一下面的边做为梯形的主体,因为可以设置整个元素的高度为0,让元素的内容溢出到下面的边上。
<!DOCTYPE html>
<style>
div {
  font:14px/24px 微软雅黑;
  text-align:center;
  color:#C30;width:100px;
  /*边框斜切产生梯形*/
  height:0px;
  border-bottom:24px solid #DDD;
  border-right:24px solid transparent;
}
</style>
<div>次碳酸钴</div>

  就像这样,我们得到一个梯形,而且文字在梯形上,看上去就像背景是梯形的一样。但是这个方法使用了透明,IE6不吃这一套所以使用是要注意,当然如果背景颜色是白色,我们可以不用透明而用白色,这样就可以兼容了。
网名:
3.84.186.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^