如何在div上加对角线

最近遇到的比较有意思的需求,也是网上搜来的做法,在这里分享一下。热豆腐在这->Demo

先画好两个div,高度都为100px,第一个固定宽度200px,第二个宽度可变。

<div class="square meh-diagonal" style="width:200px">
  fixed width
</div>
<div class="square nice-diagonal" style="width:50%">
  flexiable width
</div>
.square {
  height: 100px;
  border: 1px solid #aaa;
  padding: 10px;
  margin: 10px;
  position: relative;
}

其中设置relative定位是因为后面伪元素必须设置absolute定位。

meh

利用transform: rotate()。这是比较常见的CSS属性,大多数人能想到的也就是这个了。

.meh-diagonal:after {
  content: "";
  border-top: 1px solid red;
  width: 221px;
  position: absolute;
  left: 0;
  top: 0;
  transform: rotate(26deg);
  transform-origin: top left;
}

221px和26度都是手动算出来个大概值然后再一点点调的。

这个方法缺点在于不能自适应div元素的大小,长度和旋转角度都需要手动设置。

nice

利用linear-gradient函数。

搜到这个方法的时候,让我有一种中学做数学竞赛题的感觉:

一道死活想不出来的怎么做的题目,去请教老师,老师懒得看你一眼,扔下一句话:翻开课本一百八十九页,把定理三抄五十遍!然后你才发现这条定理原来还可以这么用。

我觉得发散思维好的人多半能把CSS魔法搞掂。

回到正题。

.nice-diagonal:after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: linear-gradient(
    to top right,
    transparent calc(50% - 1px),
    red,
    transparent calc(50% + 1px)
  );
}

前一种做法是真的在div内画了一条线,不过是一个高度为0的矩形的上边框(border-top)。而这个做法其实是在div内填充了一个从左下角到右上角的线性渐变,只是这个渐变比较特殊,除了中间2像素宽度着了红色其余地方都是透明,这样看起来就是div有了一条连接左上角和右下角的对角线。

克服了前一种做法的不能自适应的缺点,你值得拥有~

浏览器兼容性方面,transform – IE9及以上;linear-gradient – IE10及以上;calc – IE9及以上。

另外Safari浏览器好像对transparent这一值支持不太好,会把该值一律认为是“透明黑”,所以像简单的红色渐变到transparent在Safari上都会变成“红-黑-透明”。解决方法是把transparent替换成红色对应的透明值rgba(255,0,0,0)

参考

linear-gradient

Safari兼容性问题(英文)

发表评论

邮箱地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据