在HTML中裁剪旋转的形状

Question

我有一个旋转45度的彩色div，想知道是否有方法裁剪它的边缘，使其适合某个边界。 （例如：通过正方形的45度线，在接触正方形的地方切断）

以下是代码：

＆＃13;

＆＃13;

#parent {
  width: 200px;
  height: 200px;
  border: 1px solid black;  
}
#child {
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg); 
}
.red_stripe {
  width: 500px;
  height: 50px;
  background-color: red;
  position:absolute;
}
#gap {
  height:100px;
}

＆＃13;

<div id = "parent">
  <div id = "child">
    <div class = "red_stripe"></div>
    <div id = "gap"></div>
    <div class = "red_stripe"></div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

我在JSFIDDLE中重新创建了这个：http://jsfiddle.net/RBlair/s9qusfvv/2/

所以应该发生的是，红色条应该在它与右边和底边的黑色边框相遇的地方切断（我并不担心它会超出顶部或左边的边界，只是右边的边界和底部）

Answer 1

将overflow:hidden添加到#parent

#parent {
  width: 200px;
  height: 200px;
  border: 1px solid black;
  overflow: hidden;
}
#child {
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
.red_stripe {
  width: 500px;
  height: 50px;
  background-color: red;
}
#gap {
  height: 100px;
}

<div id="parent">
  <div id="child">
    <div class="red_stripe">
    </div>

    <div id="gap">
    </div>

    <div class="red_stripe">
    </div>
  </div>
</div>

Answer 2

让我们减少所需的HTML

伪元素背景

使用overflow: hidden，但使用::before pseudo element创建行，而不使用额外的HTML。

我们可以使用：

• 用于创建线条的内框阴影（非常有用，因为它不像边框那样占用空间）

• position: absolute定位:before以及百分比高度，宽度，左右

div上的

• position: relative，以便伪元素相对于它定位

完整示例

＆＃13;

＆＃13;

div {
  width: 200px;
  height: 200px;
  border: 1px solid black;
  position: relative;
  overflow: hidden;
}
div::before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: -50%;
  box-shadow: inset 0 0 0 50px #F00;
  height: 100%;
  width: 200%;
  transform: rotate(45deg);
  z-index: -1;
}

＆＃13;

<div class="box">

</div>

＆＃13;

＆＃13;

＆＃13;