A box with text paragraph left and right side angle shape with 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 i want to make a small box with add left side small text and right side curve image using css, how can i do this. it see above in image link.

Answer 1

my best so far:

  #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

See mrak-up bellow:

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