Search code examples
csssvgcss-shapeslinear-gradients

How can I draw two lines obliquely with CSS (or SVG)?

I want to create the background image of the attached div element with CSS (or SVG).

div.target {
  background-image: linear-gradient(
    to right bottom,
    transparent 50%,
    #00BCD4 50%
  );

Background image of the div element I want to create with CSS (or SVG)

Background image of the div element I want to create with CSS (or SVG)

Solution

  • We can do this using multiple background image gradients like in the below snippet. The darker shade is assigned as the background color to the element. Then two background image layers created using gradients are placed in such a way that they produce the desired effect. Adding a partially transparent layer of white color above the darker shade will produce a lighter shade.

    The background-size of the second layer should be smaller and its background-position should be at the left-bottom side of the element.

    div {
  height: 200px;
  background-color: rgb(20,203,194);
  background-image: linear-gradient(to top left, rgba(255,255,255,0.25) 50%, rgba(255,255,255,0) 50%), linear-gradient(to top right, rgba(255,255,255,0.25) 50%, rgba(255,255,255,0) 50%);
  background-size: 100% 100%, 50px 50px;
  background-position: left top, left bottom;
  background-repeat: no-repeat;
}
    <div></div>

    Angled CSS gradients are known to produce slightly jagged (or uneven or rough) edges and that can be avoided by offsetting the color stop point a bit like in the below demo.

    div {
  height: 200px;
  background-color: rgb(20,203,194);
  background-image: linear-gradient(to top left, rgba(255,255,255,0.25) 50%, rgba(255,255,255,0) calc(50% + 1px)), linear-gradient(to top right, rgba(255,255,255,0.25) 50%, rgba(255,255,255,0) calc(50% + 1px));
  background-size: 100% 100%, 50px 50px;
  background-position: left top, left bottom;
  background-repeat: no-repeat;
}
    <div></div>