如何使用CSS绘制对角线 [英] How to draw diagonal lines with css

问题描述

我需要绘制div对角线。它应该看起来像这样：

I need to draw in my div diagonal line. It should look like this:

我的HTML：

<div style="height: 28px; width: 28px; border: 1px solid rgb(219,225,230);background-color:white;" >
</div>    

是否可以仅使用CSS？

Is it possible to do it only with CSS?

推荐答案

仅使用一个div即可达到所需的效果。检查 演示 。

You can achieve the desired effect by using just one single div. Check the DEMO.

div{
  border:1px solid gray;
  width:28px;
  height:28px;
  position:relative;
}

div:after{
  content:"";
  position:absolute;
  border-top:1px solid red;
  width:40px;
  transform: rotate(45deg);
  transform-origin: 0% 0%;
}

注意：请为旧版浏览器添加供应商前缀，例如-moz，-webkit。

Note: please add the vendor prefix for older browsers i.e. -moz, -webkit.

这篇关于如何使用CSS绘制对角线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！