Using the clip-path property to determine the content padding within a div

I am encountering an obstacle while attempting to insert icons into a polygon-shaped div. The problem lies with the padding, as the icons get cut off by the borders of the polygon.

#container {
  width: 200px;
  height: 200px;
  border: 2px solid black;
  background: rgba(176, 75, 80, 0.5);
}

#example {
  position: absolute;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  text-align;
  center;
  top: 50px;
  left: 50px;
  color: red;
  width: 100px;
  height: 100px;
  background: rgba(76, 175, 80, 0.5);
  clip-path: polygon(0 25%, 100% 0%, 83% 60%, 7% 82%);
}
<script defer src="https://pro.fontawesome.com/releases/v5.8.1/js/all.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css" />

<div id="container">
  <div id="example">
    <i class="fas fa-star fa-fw filled"></i>
    <i class="fas fa-star fa-fw filled"></i>
    <i class="fas fa-star fa-fw filled"></i>
    <i class="fas fa-star fa-fw filled"></i>
    <i class="fas fa-star fa-fw filled"></i>
    <i class="fas fa-star fa-fw filled"></i>
  </div>
</div>

My attempt to use padding: auto did not resolve the issue.

htmlcss

Answer №1

Instead of using the flex layout, you have the option to utilize float and shape-outside.

https://developer.mozilla.org/en-US/docs/Web/CSS/shape-outside The shape-outside CSS property allows you to define a shape (even non-rectangular) around which adjacent inline content wraps. This provides flexibility in wrapping text around more intricate shapes rather than just rectangular boxes.

Take inspiration from this basic example:

  #container {
  width: 200px;
  height: 200px;
  border: 2px solid black;
  background: rgba(176, 75, 80, 0.5);
}

#example {
  position: absolute;
  text-align: justify;
  top: 50px;
  left: 50px;
  color: red;
  width: 100px;
  height: 100px;
  background: rgba(76, 175, 80, 0.5);
  clip-path: polygon(0 25%, 100% 0%, 83% 60%, 7% 82%);
}

#example:before {
  content: '';
  float: left;
  width: 100%;
  height: 30%;
  shape-outside:  polygon(0 0, 100% 0, 0 25%, 0 45%, 7% 100%, 0 100%, 0 44%, 0 34%);
  }
  #example [data-shape]{
  float:right;
  width:100%;
  height:100%;
  shape-outside: polygon(100% 0, 53% 40%, 0 100%, 100% 100%);
  }
  
<script defer src="https://pro.fontawesome.com/releases/v5.8.1/js/all.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css" />

<div id="container">
  <div id="example">
  <b data-shape></b>
    <i class="fas fa-star fa-fw filled"></i>
    <i class="fas fa-star fa-fw filled"></i>
    <i class="fas fa-star fa-fw filled"></i>
    <i class="fas fa-star fa-fw filled"></i>
    <i class="fas fa-star fa-fw filled"></i>
    <i class="fas fa-star fa-fw filled"></i>
  </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

Issues with jQueryUI sortable causing flickering and erratic movement while attempting to reorder and position items within the list

When using jQueryUI sortable with a long list of items, I encounter an issue where the items flicker and jump around the screen as I try to change their order by dragging them. This makes it nearly impossible to organize the items effectively. It seems li ...

jqueryhtmlcssjquery-ui

Linking text to specific spot on image

I am seeking a solution to anchor a text input box to a specific spot on an image. Although I can achieve this using CSS, the problem arises when I resize my window and the alignment of the input box is lost. While I want to allow some resizing of the win ...

htmlcss

Adjust the size of images using jQuery to perfectly fit the container dimensions

I am currently working on a script to automatically resize images that are too large for the container: $('img').each(function(i){ var parent_width = parseInt($(this).parent().width()), image_width = parseInt($(this).width()); ...

javascriptjquerycssimage

What could be causing the delay in my IP camera image updates?

I have implemented a jQuery script to update the src attribute of an <img> element on a webpage at regular intervals. However, I am facing an issue where the image is not consistently updated according to the specified setInterval. Interestingly, dir ...

jqueryhtmlip-camera

The Verdana font in Microsoft Word appears with a distinct rendering when converted to an HTML-based

I'm currently working on generating a PDF from an HTML template. Our customer provided the template they previously used in Word, and they require the font to be Verdana. The challenge I'm facing is that Verdana looks smaller and has a different ...

htmlcssasp.net-corefontsselectpdf

Eliminate screen flickering during initial page load

I've been developing a static website using NuxtJS where users can choose between dark mode and default CSS media query selectors. Here is the code snippet for achieving this: <template> <div class="container"> <vertical-nav /> ...

javascriptcssvue.jsdomnuxt.js

Using an HTML element to pass a variable into a replace function

I am looking to highlight a 'SearchString' by replacing it with <span style="background-color: yellow">SearchString</span> within a targetString. The SearchString varies, so I am wondering how I can make this happen. This is what I ...

javascriptjqueryhtmlcssangularjs

The resize function fails to trigger when it is required

Struggling to get this code working properly. If the window width is greater than 800, I want 6 images with a red background. If the window width is less than 800, I want 4 images with a blue background. I need this functionality to work both on r ...

javascriptjquerycss

Using jQuery to scroll to an element when it is not currently in view

Despite numerous similar inquiries on the subject, my search for a solution on Stack Overflow has been fruitless. I have a nested comment structure, akin to the Facebook Comments plugin, where clicking 'reply' triggers a form to appear at the bot ...

jqueryhtmlscroll

Guide on displaying the name attribute of a button along with its price in a separate div when clicked

Upon clicking the Koala button, I want to display a message showing the id name of the button and the corresponding price for Koalas. Here is the HTML code snippet: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <link h ...

javascripthtmloop

How float elements can affect z-index through opacity

While troubleshooting the alignment of my floated images, I came across an unexpected issue related to opacity: http://jsfiddle.net/tshwbnLo/ It appears that when an element has opacity, it does not adhere to the usual behavior and instead overlaps the f ...

htmlcsscss-floatopacity

Filling HTML5 Datepicker Using Information from a Model

Currently, I am in the process of developing a basic scheduling application for a project. To simplify the task of selecting start and end times/dates for our events, we have included a simple DateTime picker in the source code: <input type="datetime-l ...

javascriptasp.net-mvchtmlrazor

What is the process for transferring an image from the main page to another?

For days, I have been searching for an answer without any luck. It seems that I just can't wrap my head around it and apply it to what I am working on. Currently, I am using PHP to store images on the server when a user hits submit. My goal is to dis ...

javascriptphpjqueryhtml

What could be causing the append function to only work during the final iteration of my code?

I find myself in the position of recreating a table based on another existing one. While I am aware that this may not be the ideal approach, it is a task that has been assigned to me rather than being my own choice. My method involves iterating through ea ...

jqueryhtml

Arranging images effortlessly using jQuery sortable feature in HTML

I'm currently working on creating sortable images using jQuery in an HTML document. I've encountered an issue with the source code here. I have implemented the jQuery sortable function in a functions.js file and successfully tested it on another ...

jqueryhtmlcssimagejquery-ui-sortable

The enchanting world of CSS background scrolling animations

I am currently developing a website where I have split the hero/header into two sections - one on the left with information and the other on the right with a graphic. I wanted to add a simple parallax effect to the image on the right side, so I used backgr ...

jqueryhtmlcss

Utilizing jQuery to pinpoint elements with personalized data attributes

I am struggling with a few elements that look like this <p data-lang-bg="Bulgarian" data-lang-en="English" >Text</p> <p data-lang-bg="Other bulgarian text" data-lang-en="Other english text" >Text 2</p> How can I write a jQuery sel ...

jqueryhtmlcss-selectorsjquery-datacustom-data-attribute

Add navigation dots to the slider in order to align them with the specified div element

Visit this JSFiddle link for the code <html> <link href="./style.css" rel="stylesheet" type="text/css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script&g ...

javascripthtmljquerycss

Azure Chatbot that logs conversations in Webchat whenever the user selects 'none of the above' option

Recently, I've delved into the world of web chat services and embarked on a journey to craft a chat bot using pure JavaScript code that can seamlessly integrate into any HTML file. Despite consulting Microsoft's documentation, I find myself in a ...

javascripthtmlazure

Expanding div fills remaining space with scrollable content (Utilizing Bootstrap 4 Flexbox grid)

My code was running smoothly before I enabled flexbox support in Bootstrap 4 Alpha 3: Check out the working jsfiddle here However, once flexbox support was enabled, I hit a roadblock. I'm looking for a solution using Bootstrap 4 built-in Flexbox gri ...

htmlcsstwitter-bootstrapflexboxbootstrap-4