带有文本段左右侧角形状的盒子，带有css

Question

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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>

Answer 2

请参阅下面的文章：

.football{
  width: 50%;
  box-shadow: 0 4px 12px 4px rgba(0,0,0,0.2);
}
.text-ft{
  display: block;
  height: 165px;
  width: 250px;
  word-wrap: break-word;
padding-top: 15px;
margin-left: 15px;
}
.football:after{
position: absolute;
content: '';
float: right;
width: 0;
height: 0;
left: 166px;
top: 36px;
border-style: solid;
border-width: 0 0 152px 157px;
border-color: transparent transparent #d869a7 transparent;

}

<div class="football">
    <div class="text-ft">
        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.
   
    </div>
</div>