Utilizing CSS to create a text box with angled left and right edges

.soccer-field{
        width: 50%;
        box-shadow: 0 4px 12px 4px rgba(0,0,0,0.2);
      }
      .text-sf p{
        float:left;
      }
      .right-curve{
        float:right;
        width: 0;
        height: 0;
          border-style: solid;
          border-width: 0 0 152px 157px;
         border-color: transparent transparent #d869a7 transparent;
       }
<div class="soccer-field">
          <div class="text-sf">
              <p>Soccer is now a popular sport in many countries. Whether played on city streets or village fields, it captures the spirit of competition and camaraderie.</p>
             <div class="right-curve"></div>
           </div>
        </div>

click here to see an image of what I am trying to create In my design, I aim to showcase a small box with text on the left and a curved image on the right using CSS. How can I achieve this effect? Refer to the above image link for inspiration.

csshtml

Answer №1

Here is my latest creation:

#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

Check out the markup below:

.soccer{
  width: 50%;
  box-shadow: 0 4px 12px 4px rgba(0,0,0,0.2);
}
.text-soc{
  display: block;
  height: 165px;
  width: 250px;
  word-wrap: break-word;
padding-top: 15px;
margin-left: 15px;
}
.soccer: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="soccer">
    <div class="text-soc">
        Soccer is now a popular sport worldwide. People of all ages enjoy playing soccer in various settings. It is more than just a game; it is a passion for many.
   
    </div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Ways to eliminate the excess space surrounding an Image border

I am looking to position the image at the top right corner of the screen. body{ font-family: 'Roboto', sans-serif; font-weight: 300; background: #822B2B; color: #ffffff; overflow: hidden; } #showcase{ display: flex; justify-content: center; al ...

htmlcssimagebackgroundspace

Tips for incorporating your personal touch while utilizing Snipcart

I have created an ecommerce platform with GatsbyJS and Snipcart, but I am struggling to override the default theme provided by Snipcart. When I try to change the main default CSS through gatsby-config.js, it does not seem to work. Does anyone have a soluti ...

javascriptcssreactjssnipcart

Angular ui-router redirection without altering the ui-view contents

Here's the code snippet from my app.js: // Setting up states using $stateProvider $stateProvider .state('/', { url: "/", views: { "top": { temp ...

htmlangularjsrouterangular-ui-router

Is there a way for me to attach a link to a picture displayed in a lightbox that directs to an external ".html" file?

I have a platform where users can view images in a gallery and when they click on an image, it opens up in a lightbox. I am trying to add a feature where the opened image can be clicked again to redirect the user to an external page. I attempted to nest t ...

javascriptcsshtmllightbox

Tips for creating dynamic animations in an opencart dropdown menu

Currently, I am in the process of enhancing my ecommerce website using OpenCart and I have been trying to incorporate a simple animation for the dropdown menu. However, despite applying the transition properties in the code snippet below, it seems that the ...

cssdrop-down-menuopencartdropdownopencart2.x

The cursor image fails to function when entering a specific area within the image

I have implemented a custom cursor using the code snippet below. $("div").css('cursor','url(../graphics/system/mybg.cur),auto'); However, I am experiencing an issue where the cursor reverts to the default pointer when hovering over a ...

jqueryhtmlcsscursor

Struggles with Aligning CSS Layout

I'm encountering some challenges with the layout of my webpage, particularly with alignment. Here are the issues I'm facing: The login section doesn't fit well in the header and lacks proper alignment. I aim to replicate the design from ...

htmlcss

Poorly positioned text displayed inline in HTML

My attempt to place a title in a div toolbar next to some images has hit a snag. The text is not aligning correctly; it should be positioned at the top of the toolbar, but it stubbornly remains at the bottom without budging. I wish for it to be vertically ...

htmlcss

Learn how to utilize the getElementByClassName method in JavaScript to insert checkboxes into two lists that share the same class name

I have a situation where I have two lists sharing the same class name. I need to dynamically create checkboxes in both of these lists based on XML data. My current dilemma lies in how to properly utilize getElementByClassName in JavaScript to add checkbox ...

javascriptjqueryhtml

The alignment is off

<script> var myVar = setInterval(myTimer, 1000); function myTimer() { var d = new Date(); document.getElementById("demo").innerHTML = d.toLocaleTimeString(); } </script> <p text-align="right" id="demo" style="font-family:Comic Sans ...

javascripthtml

I am encountering an issue with Angular where the following error message is displayed: "src/app/app.component.html:18:20 - error TS2339: Property 'DepScreen' does not exist on type 'AppComponent'"

This code snippet is from my app.component.html file: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0" ...

javascripthtmlangularangular8

Obtain the form value upon submission without the need to reload the page

I am facing an issue where I have a form and I want to trigger the display of a div (in the same page) and execute a JavaScript function upon clicking submit, all without causing a page refresh. <form action="#" method="post" name= "form1" id = "form ...

javascriptphphtmlajax

showing text from chosen selection with an additional element included in the output

I could use some assistance with this code snippet. My goal is to showcase the options in the format: "Fried Rice = 10.000" as the outcome. However, the issue I am facing is that the select option box also contains the price. What I actually need is for th ...

javascripthtmljquery

When applying the OWASP ESAPI encodeForHTMLAttribute method, I noticed that symbols are being rendered as their corresponding HTML entity numbers instead of the actual symbols

I recently started exploring OWASP ESAPI for preventing XSS and integrating the JavaScript version into my application. As per Rule #2 in the XSS prevention cheat sheet, it is recommended to "Attribute Escape" before inserting untrusted data into attribut ...

javascripthtmlencodingowaspesapi

Adding an input field and icon at the center using ::after

Having trouble centering an input field with an icon after it in a div. I can center the input text easily using text-align:center, but struggling to center the icon added using ::before. The search text is centered, but not the icon https://i.sstatic.ne ...

htmlcss

Issues arise when attempting to display Sphinx documentation containing SVG images on Internet Explorer 11

I have been working on building Sphinx documentation and incorporating a UML diagram generated as an SVG image using graphviz. The SVG file is embedded in the auto-generated HTML template from Sphinx. While the SVG displays perfectly fine on Chrome and Fi ...

htmlsvginternet-explorer-11python-sphinxgraphviz

How can I show two unique chart modals simultaneously?

Below is the chart that I am currently working on: https://i.stack.imgur.com/bHSj6.png While I am able to display the charts separately, I am encountering difficulties when trying to display both of them on the same chart line. <!DOCTYPE html> < ...

htmlcsscanvascharts

Tips for personalizing the css styles of an alert box?

I am in need of customizing the alert box using CSS attributes. Currently, I am able to achieve a similar effect with the code below: JQUERY: $('<div class="alertMessage">Error first</div>') .insertAfter($('#componentName' ...

javascriptjqueryhtmlcss

Creating a cutoff with CSS: A step-by-step guide

Is there a way to create something similar using only CSS? https://i.stack.imgur.com/N9c6W.png I have no clue on how to achieve this. Any assistance would be greatly appreciated. ...

css

Utilizing the Flex property on the parent div ensures that all child elements receive an equal width

I am currently working on a messaging application and I want the layout to be similar to Twitter or Whatsapp. Specifically, I want the messages from the person the user is chatting with to appear on the left side, while the user's own messages should ...

javascripthtmlcssuser-interfaceflexbox