I am trying to create a diagonal line on a webpage, to act as a section/section break. This is essentially a split colour section. I cant use an image as if the page gets enlarged, the image is going to pixelate. So i need to be able to draw a diagonal line directly at the bottom of the div, like the image below.
I have tried using a border, however i cannot get the actual break to be in the middle, rather than the right or left hand side.
Is there a way to draw diagonal lines in CSS? As you can see, i need to create a div that is 90px high and have the split/diagonal line in that div. I can then have a look at adding the image, but the main issue is not knowing whether this is possible with CSS.
So, to draw a diagonal line in CSS, we have to simply rotate a normal horizontal line at an angle of + or – 45 degrees. The rotation in CSS is done using the transform property. To create a horizontal line you can either use the border-top or the border-bottom property whichever best suits you.
In order to make oblique lines with CSS, there are two main approaches. The first approach involves the clip-path property of CSS and in the second approach, we use transform property with skew() of CSS. Approach 1: Using clip-path property: The clip-path property is generally used to clip an element to a basic shape.
width: 100px; The fun thing though, is that you can turn it into a diagonal just by changing the degree of rotation! To move the line around the page you can add the parameters translateX and translateY to the transform property. This will move the line along the X and Y axis respectively.
With an svg, it is pretty simple :
svg {
display: block;
width: 100%;
height: 90px;
background: yellow;
}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 10" preserveAspectRatio="none">
<polygon points="100 0 100 10 0 10" />
</svg>
Note that I used the preserveAspectRatio="none"
attribute so that the shape can have 100% width and keep 90px height
And here with a monkey image :
div {
position: relative;
}
svg {
display: block;
width: 100%;
height: 90px;
background: yellow;
}
img {
height: 50px;
position: absolute;
top: 0; bottom: 0;
left: 0; right: 0;
margin: auto;
background: #fff;
border-radius: 50%;
padding: 10px;
}
<div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 10" preserveAspectRatio="none">
<polygon points="100 0 100 10 0 10" />
</svg>
<img src="http://images.clipartpanda.com/monkey-clipart-black-and-white-16981-monkey-face-svg.svg" alt="" />
</div>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With