CSS模板布局怎么做？

Question

我想要的是这种效果。

我尝试按照上面的图片制作一个CSS模板，但是我不知道该怎么做？

可以根据上面的图片制作css效果吗？

Answer 1

您可以使用2D转换（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; }

这里是JSFiddle

中的一个示例