CSS斜线 - 如何适应其父元素？

Question

我该如何使用纯CSS实现对角线填充并适应盒子大小？

div.diagonal-container {
    border: 1px solid #000;
    width:400px;
    height:400px;
    margin: 0 auto;
}

.to-right,
.to-left {
    border-top:1px solid #ff00ff;
    width:100%;

    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.to-right {
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

<div class="diagonal-container" style="">
    <div class="to-right"></div>
</div>

<div class="diagonal-container" style="">
    <div class="to-right"></div>
</div>

<div class="diagonal-container" style="">
    <div class="to-left"></div>
</div>

结果：

jsfiddle。

另外，是否可能只有元素而没有包装它？例如：

<div class="to-right"></div>
<div class="to-right"></div>
<div class="to-left"></div>

这是可能的吗？

- Run

---

通过div或span添加对角线请问有什么方法可以在div或span中添加一条对角线吗？ - Kyle Martin

我不想使用背景图片 - 只用纯CSS。 - Run

Answer 1

您可以添加一个线性渐变背景并丢弃内部元素，将该类添加到其他div中。

div.diagonal-container {
  border: 1px solid #000;
  width: 400px;
  height: 400px;
  margin: 0 auto;
}

.to-right {
  background: linear-gradient(135deg, transparent calc(50% - 1px), red 50%, transparent calc(50% + 1px) );
}

.to-left {
  background: linear-gradient(45deg, transparent calc(50% - 1px), red 50%, transparent calc(50% + 1px) );
}

<div class="diagonal-container to-right"></div>

<div class="diagonal-container to-right"></div>

<div class="diagonal-container to-left"></div>

- pol

Answer 2

你可以使用伪元素来绘制线条。

.diagonal-container {
  border: 1px solid #000;
  width: 400px;
  height: 400px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}

.diagonal-container:before {
  border-top: 1px solid #ff00ff;
  content: '';
  position: absolute;
  top: 0; left: 0; right: -50%;
  transform: rotate(45deg);
  transform-origin: 0 0;
}

.to-right:before {
  right: 0; left: -50%;
  transform: rotate(-45deg);
  transform-origin: 100% 0;
}

<div class="diagonal-container to-right">
</div>

<div class="diagonal-container to-left">
</div>

<div class="diagonal-container to-right">
</div>

- Michael Coker

Answer 3

我的方法：

1. 将容器使用position: relative，将线条使用position: absolute。
2. 对于左边的线条，使用transform-origin: left和left: 0，对于右边的线条，使用transform-origin: right和right: 0。
3. 如果容器的width和height相等，则线条的宽度将为~141.5%。

.diagonal-container {
    border: 1px solid #000;
    width: 400px;
    height: 400px;
    margin: 0 auto;
    position: relative;
}

.to-right, .to-left {
    border-top: 1px solid #ff00ff;
    width: 141.5%;
    position: absolute;
    top: 0;
}

.to-left {
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-transform-origin: left;
    -ms-transform-origin: left;
    transform-origin: left;
    left: 0;
}

.to-right {
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -webkit-transform-origin: right;
    -ms-transform-origin: right;
    transform-origin: right;
    right: 0;
}

<div class="diagonal-container">
    <div class="to-right"></div>
</div>

<div class="diagonal-container">
    <div class="to-right"></div>
</div>

<div class="diagonal-container">
    <div class="to-left"></div>
</div>

如果您使用CSS预处理器（例如LESS），您可以按照以下方式操作：

@width: 400px;
@height: 400px;

.rotate(@angle, @origin) {
    -webkit-transform: rotate(@angle);
    -ms-transform: rotate(@angle);
    transform: rotate(@angle);
    -webkit-transform-origin: @origin;
    -ms-transform-origin: @origin;
    transform-origin: @origin;
}

.diagonal-container {
    border: 1px solid #000;
    width: @width;
    height: @width;
    margin: 0 auto;
    position: relative;
}

.to-right, .to-left {
    border-top: 1px solid #ff00ff;
    width: sqrt(@width*@width + @height*@height);
    position: absolute;
    top: 0;
}

.to-left {
    .rotate(45deg, left);
    left: 0;
}

.to-right {
    .rotate(-45deg, right);
    right: 0;
}

CodePen

的英文意思是 "

CodePen

"，它是一个HTML标签，可能用于在网页中创建一个链接到CodePen网站的超链接。

- sergdenisov

Answer 4

最好使用SVG，它可以提供漂亮的响应式对角线，在几乎所有浏览器上都能工作。

.box {
    width: 20rem;
    height: 10rem;
    background-color: hsla(0, 0%, 70%, 0.3);
    cursor: pointer;
    position: relative;
}

.svg-stroke {
    position: absolute;
    width: 100%;
    height: 100%;
}

<div class="box">
    <svg class='svg-stroke' viewBox='0 0 10 10' preserveAspectRatio='none'>
         <line x1='10' y1='0' x2='0' y2='10' stroke='red' stroke-width='.2' stroke-opacity='0.2' />
    </svg>
</div>

- sojin

Answer 5

尝试将以下内容作为您的CSS：

div.diagonal-container {
  border: 1px solid #000;
  width: 400px;
  height: 400px;
  margin: 0 auto;
  overflow: hidden;
}

.to-right,
.to-left {
  border-top: 1px solid #ff00ff;
  width: 100%;
}

.to-left {
    transform: rotate(45deg) scale(1.5);
    transform-origin: top left;
}

.to-right {
  transform: rotate(-45deg) scale(1.5);
  transform-origin: bottom right;
}

- Marin Carroll

---

另一个答案比我的好，楼主 ;) - Marin Carroll