kissge · July 16, 2019 06:41
diff --git a/shape-outside.html b/shape-outside.html

 <!doctype html>
 <html>

 <head>
    <style>
        * {
            box-sizing: border-box;
        }

        .wrapper {
            width: 1000px;
        }

        .jammer-left {
            shape-outside: polygon(0 0, 500px 500px, 0px 500px);
            clip-path: polygon(0 0, 500px 500px, 0px 500px);
            width: 50%;
            height: 500px;
            float: left;
            pointer-events: none;
            background: #329874;
        }

        p {
            width: 100%;
            height: 500px;
            font-size: 30pt;
            text-align: justify;
        }

        .jammer-right {
            shape-outside: polygon(200px 0, 500px 0px, 500px 400px, 470px 360px, 400px 360px, 390px 120px);
            clip-path: polygon(200px 0, 500px 0px, 500px 400px, 470px 360px, 400px 360px, 390px 120px);
            width: 50%;
            height: 500px;
            float: right;
            pointer-events: none;
            background: #329874;
        }

        span {
            position: absolute;
        }

        span:nth-of-type(2) {
            left: 2em;
        }
    </style>
 </head>

 <body>
    <div class="wrapper">
        <div class="jammer-left"></div>
        <div class="jammer-right"></div>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium vitae qui facere possimus cum, ab
            asperiores modi, quas hic aliquam fuga recusandae illum atque placeat, similique enim doloribus accusamus
            quia! Lorem ipsum dolor sit, amet consectetur adipisicing elit. Odio animi dolorum, cumque hic quasi
            reiciendis dolore vel esse nesciunt obcaecati tenetur et. Cupiditate, laborum optio natus accusamus
            consequuntur cumque aliquam. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eos odio facilis
            numquam deleniti accusamus! Inventore maiores dolores corporis in molestias obcaecati ullam nisi. Dolorem
            numquam laboriosam, eius autem architecto nesciunt.</p>
    </div>
    <span>あ</span><span>い</span>
 </body>

 </html>

	<!doctype html>
	<html>

	<head>
	<style>
	* {
	box-sizing: border-box;
	}

	.wrapper {
	width: 1000px;
	}

	.jammer-left {
	shape-outside: polygon(0 0, 500px 500px, 0px 500px);
	clip-path: polygon(0 0, 500px 500px, 0px 500px);
	width: 50%;
	height: 500px;
	float: left;
	pointer-events: none;
	background: #329874;
	}

	p {
	width: 100%;
	height: 500px;
	font-size: 30pt;
	text-align: justify;
	}

	.jammer-right {
	shape-outside: polygon(200px 0, 500px 0px, 500px 400px, 470px 360px, 400px 360px, 390px 120px);
	clip-path: polygon(200px 0, 500px 0px, 500px 400px, 470px 360px, 400px 360px, 390px 120px);
	width: 50%;
	height: 500px;
	float: right;
	pointer-events: none;
	background: #329874;
	}

	span {
	position: absolute;
	}

	span:nth-of-type(2) {
	left: 2em;
	}
	</style>
	</head>

	<body>
	<div class="wrapper">
	<div class="jammer-left"></div>
	<div class="jammer-right"></div>
	<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium vitae qui facere possimus cum, ab
	asperiores modi, quas hic aliquam fuga recusandae illum atque placeat, similique enim doloribus accusamus
	quia! Lorem ipsum dolor sit, amet consectetur adipisicing elit. Odio animi dolorum, cumque hic quasi
	reiciendis dolore vel esse nesciunt obcaecati tenetur et. Cupiditate, laborum optio natus accusamus
	consequuntur cumque aliquam. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eos odio facilis
	numquam deleniti accusamus! Inventore maiores dolores corporis in molestias obcaecati ullam nisi. Dolorem
	numquam laboriosam, eius autem architecto nesciunt.</p>
	</div>
	<span>あ</span><span>い</span>
	</body>

	</html>