Рамка с текстом абзаца слева и справа под углом формы с помощью 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>

кликните и посмотрите изображение, что я хочу сделать Я хочу сделать небольшую коробку с добавлением левого небольшого текста и правого изображения кривой с помощью 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>