cssで斜め線と直線を併用し，sectionの区切り線を実装したい

うまく言葉に表せないのですが，画像のようなデザインのWebページを実現するためにはどのような方法が適しているでしょうか．

追記

html
1（省略）
2<body>
3  <main>
4    <div class="margin-box left"></div>
5    <div class="flex">
6      <section class="content">
7        <h2>test</h2>
8        <p>testtesttest</p>
9      </section>
10      <div class="diagonal"></div>
11    </div>
12  </main>
13</body>
14</html>
15

css
1*{
2  margin: 0;
3  padding: 0;
4}
5
6.flex{
7  display: flex;
8  align-items: flex-start;
9}
10
11body{
12  background-color: black;
13  color: white;
14}
15
16main{
17  max-width: 1280px;
18  margin: 0 auto;
19  padding-left: 10%;
20}
21
22.margin-box{
23  height: 300px;
24  margin-bottom: -20px;
25}
26
27.left{
28  border-left: 3px solid #FFF;
29}
30
31.content{
32  width: 60%;
33  overflow: hidden;
34}
35
36h2 {
37  position: relative;
38  display: inline-block;
39  padding: 0 50%;
40}
41
42h2:before,h2:after{
43  content: '';
44  position: absolute;
45  top: 50%;
46  display: inline-block;
47  width: 40%;
48  height: 3px;
49  background-color: white;
50}
51
52
53h2:before {
54  left:0;
55}
56
57h2:after {
58  right: 0;
59}
60
61.diagonal {
62  content: '';
63  display: inline-block;
64  height: 3px;
65  width: 40%;
66  background-color: white;
67  transform: skewY(45deg);
68  margin-top: 19.7vw;
69}
70
71.diagonal > * {
72  transform: skewY(-45deg);
73}
74

全く実現できていませんが現時点でのコードはこんな感じです．
課題としては，横幅の変化によって斜め線の位置がずれてしまうことです．

marlboro_tata

2020/03/15 02:23

大変興味深い質問ではあるのですが、この場は、実際にコードを書き、そのコードに対して「こうしたほうがいい」「ここが間違っている」という議論をする場と考えています。自分なりに、こういうHTMLやCSSを書いてみたが、問題が解決できない、なのでアドバイスが欲しい！という段階までは自分でやらないと、回答やアドバイスは得られにくいと考えます。

marlboro_tata

2020/03/15 02:30

・・・・・・と、言いつつ。様々用件が不足しているので、なんとも言い難いですが、擬似要素を利用して線を描画し、それを transform: skewX(角度); などでシアーさせつつ、要素内で絶対配置する感じかな、、、と妄想します。

行動規範の内容に同意します

回答1件

ベストアンサー

概ねざっくり、こんな感じかと。

HTML
1<main>
2	<div class="margin-box left"></div>
3	<div class="container">
4		<section class="content">
5			<h2><span>test</span></h2>
6			<p>テストテストテストテストテストテストテストテストテストテストテストテストテスト</p>
7			<p>テストテストテストテストテストテストテストテストテストテストテストテストテスト</p>
8			<p>テストテストテストテストテストテストテストテストテストテストテストテストテスト</p>
9		</section>
10	</div>
11</main>

CSS
1:root {
2	--content-height: 400px;
3}
4
5* {
6	margin: 0;
7	padding: 0;
8}
9
10body {
11	background-color: #000;
12	color: #fff;
13}
14
15main {
16	max-width: 1280px;
17	margin: 0 auto;
18	padding-left: 10%;
19}
20
21.margin-box {
22	height: 300px;
23}
24
25.left {
26	border-left: 3px solid #FFF;
27}
28
29.container {
30	position: relative;
31	height: var(--content-height);
32	padding-right: var(--content-height);
33}
34.container::after {/*斜め線部分*/
35	content: "";
36	display: inline-block;
37	position: absolute;
38	right: calc( var(--content-height) / 2 );
39	top: 0;
40	bottom: 0;
41	width: 5px;
42	background-color: #fff;
43	transform: skewX(45deg);
44}
45
46.content {
47	border-top: 3px solid #fff;
48}
49.content h2 {
50	margin-top: -14px;/*フォントサイズ×line-height値×-0.5 ぐらいが目安*/
51	text-align: center;
52}
53.content h2 span {
54	background: #000;
55	display: inline-block;
56	padding: 0 1em;
57}
58