CSS对角线-如何适合其父元素？ [英] CSS diagonal lines - how to fit into its parent element?

问题描述

如何使对角线填充并适合框（仅使用纯CSS而不使用背景图片）？

How can I make a diagonal line fill in and fit into a box (just pure css - without any use of background image)?

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 。

也是有可能只包含一个元素而不包装它？例如：

Also, is it possible to have an element only without wrapping it? For instance:

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

有可能吗？

推荐答案

您可以使用伪元素来画线。

You can draw the lines with pseudo elements.

.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>

这篇关于CSS对角线-如何适合其父元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！