css - 带有文本段落左右 Angular 形状的框，带有 css

Question

.football{
  width: 50%;
  box-shadow: 0 4px 12px 4px rgba(0,0,0,0.2);
}
.text-ft p{
  float:left;
}
.right-shape{
  float:right;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0 152px 157px;
  border-color: transparent transparent #d869a7 transparent;
}

<div class="football">
    <div class="text-ft">
        <p>Football is now-a-days almost a national game in Bengal. In the streets of cities, open fields of village boys and young men kick at football in all season. It is not a mere game of amusement. It is the breath of a Bengali boy.</p>
        <div class="right-shape"></div>
    </div>
</div>

click and see image what i want to make我想使用 css 制作一个小盒子，其中添加左侧小文本和右侧曲线图像，我该怎么做。它在图像链接中看到上面。

Answer 1

到目前为止我最好的成绩:

		#container {
			width: 300px;
			height: 200px;
			margin: 50px auto;
			border: 2px black solid;
			overflow: hidden;
			transform: rotate(45deg, 0deg);
			position: relative;
		}
				
		#text {
			padding: 20px;
		}
	
		#side-img {
			background-color: green;
			right: 0;
			position: absolute;
			height: 300px;
			width: 200px;
			transform: rotate(45deg) translateX(95px) translateY(0px);
		}
		
		.spacer {
			height: 50px;
			width: 0px;
			float: right;
		}
		
		.bottomRight {
			shape-outside: polygon(25% 100%, 100% 0%, 100% 100%);
			height: 150px;
			width: 300px;
			float: right;
			clear: right;
		}

<div id="container">
		<div id="side-img"></div>
		<div id="text-container">
			<div class="spacer"></div>
			<div class="bottomRight"></div>
			<p id="text">Lorem ipsum dolor sit amet, conse ctetur adi pisic  ing elit. Nobis nihil, sequi nam! Enim pers pici atis quasi asper iores nost rum offi ciis ipsum, pra es entium comm odi eaque rem, quia fugit earum, sapi ente quod iste!</p>
		</div>


	</div>