Trim rotation in HTML
I have a colored div that is rotated 45 degrees and is wondering if there is a way to crop its edges to fit a certain border. (for example: a 45-degree line through the square, cut where it touches the square).
Here is the code:
#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;
}
<div id = "parent">
<div id = "child">
<div class = "red_stripe"></div>
<div id = "gap"></div>
<div class = "red_stripe"></div>
</div>
</div>
I have recreated this in JSFIDDLE: http://jsfiddle.net/RBlair/s9qusfvv/2/
So what should happen is that the red stripe should be cut off where it meets the black border on the right and bottom sides (I'm not worried about it exceeding the border at the top or left, only the right side and bottom)
source to share
Add overflow:hidden
to#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>
source to share
Allows you to shorten the required HTML
Pseudo element background
Use overflow: hidden
but create lines with ::before
pseudo-element and no additional HTML.
We can use:
-
inner window shadow for creating lines (useful since it doesn't take up space like a frame)
-
position: absolute
to fit:before
along with percentage of height, width, left and right -
position: relative
on a div so that the pseudo-element is positioned in relation to it
Complete example
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;
}
<div class="box">
</div>
source to share