ringa_lee2017-06-05 11:15:40
원 4개를 직사각형의 꼭지점 4개로 생각하고 점선은 테두리 스타일의 점선을 사용하여 구현할 수 있습니다.
그러면 전체 페이지가 이 직사각형처럼 수직으로 하나씩 쌓이게 됩니다. 두 개의 정점이 각 직사각형에 배치되고 직사각형의 왼쪽 상단과 오른쪽 상단에 절대적으로 위치하게 됩니다.
https://codepen.io/straybugs/…
大家讲道理2017-06-05 11:15:40
순수한 수평적, 수직적 진보 관계가 없어 매우 어색해 보입니다.
각 레이어 간의 관계는 포인터에 의한 것이 아니라 아래의 단계 수를 보면 알 수 있습니다.
어두운 배경의 프로세스 설명도 2개 있는데 목적을 모르겠습니다.
전체적인 경험이 너무 열악하고, 특히 프로세스가 너무 좁아서 사용자의 주의에 영향을 미칩니다.
漂亮男人2017-06-05 11:15:40
width || height: calc는 선 너비를 동적으로 계산합니다. 이 검은 선은 의사 요소인 ::before ::after를 사용할 수 있으며, 해당 부모 클래스는 모두 호스트 요소라고 생각하지만 CSS를 사용하면 가능합니다. .
伊谢尔伦2017-06-05 11:15:40
1. 사진과 함께 커팅하는 것도 하나의 방법입니다.
2. 또는 위치 지정을 위해 레이아웃의 추가 p를 사용하고 스타일을 위해 테두리: 1px 점선 #000을 사용합니다. . 그게 다야.
3. CSS 의사 클래스를 사용하여 구현하세요.
高洛峰2017-06-05 11:15:40
IE8 이후의 브라우저라면 의사 클래스를 사용해 구현하세요
으아아아이전 브라우저와 호환되는 경우 p만 사용하여 웨이브를 시뮬레이션할 수 있습니다. 이는 개인의 필요에 따라 다릅니다.
给我你的怀抱2017-06-05 11:15:40
먼저 ul li float를 사용하여 부동하고, 그 다음 class.bg{position:relitive}를 작성하고 두 개의 의사 클래스, 즉 수평선과 수직선을 작성하고 디자인 초안에 따라 위치를 지정합니다
