Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Creating a diagonal line/section/border with CSS

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.

Diagonal section separator

like image 684
Dom Greenslade BSc Avatar asked Mar 12 '15 16:03

Dom Greenslade BSc


People also ask

How do you make a diagonal border in 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.

How do I make an oblique line in CSS?

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.

How do you draw a diagonal line in HTML?

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.


1 Answers

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>
like image 105
web-tiki Avatar answered Sep 21 '22 19:09

web-tiki