How to do the css template layout?

Question

I want is to have something like this effect.

I tried to make a css template by following the picture above, but I don't know how to do it?

Do you can make css effect according to the above picture?

StackOverflow is not a programming service. Please tell us what you have tried so far, and what your issue is. — Seblor, Jul 05 '18 at 12:35
Are you asking how to draw diagonal lines with CSS? CSS is a poor tool for that job. Use SVG for vector art. — Quentin, Jul 05 '18 at 12:36
@wentian — CSS is the wrong tool. Stop trying to use it for this. — Quentin, Jul 05 '18 at 12:42

score 0 · Accepted Answer · answered Jul 05 '18 at 12:53

0

You can use 2D Transformation (https://www.w3schools.com/css/css3_2dtransforms.asp).

.line1 {
width: 112px;
height: 47px;
border-bottom: 1px solid red;
-webkit-transform:
    translateY(-20px)
    translateX(5px)
    rotate(27deg); 
position: absolute; }

Here is an example in JSFiddle

answered Jul 05 '18 at 12:53

davidh

49
4

The problem with this is it's for webkit only browsers which leaves out everything but Safari and Chrome. Even then, neither of those browsers have needed webkit prefixes for this in years! This is an antiquated answer. – Rob Jul 05 '18 at 14:01

How to do the css template layout?

I want is to have something like this effect.

1 Answers1