How can we generate a intricate polygonal figure using an image in CSS that can be utilized in the regions property?

I'm on a mission to transform black images into polygon shapes.

The challenge at hand involves two key steps:

  1. Converting an image into a polygon
  2. Filling the polygon with text

I'm currently stuck on the first step. Without any existing converters, my only solution is to convert the image into SVG format (if it's not already SVG), extract the vector data, and insert it directly into a CSS polygon shape (similar to how it's done with Raphaël.js).

Is this the only viable approach?

Here are the constraints:

  • Avoid creating numerous divs to form a shape
  • Avoid using JavaScript for this task
  • For complex shapes, it must be a polygon

Below are examples of the complex polygons I aim to create.

Any suggestions on the best approaches to take?

Images sourced from Adobe:

Answer №1

In order to create box masking, you can utilize an image. For detailed instructions, refer to this article, and for a sample demonstration, visit this link (please note it only works on Webkit browsers).

<style type="text/css">
.wrap {
  height:400px;
  width:800px;
  -webkit-mask-box-image:url('silhouette.png');
}
</style>
<div class="wrap">Lorem ipsum dolor sit amet...</div>

Result :

** UPDATE **

Exploring cutting-edge technologies!!

To enable experimental features like Shapes, Regions, and Blend Modes, follow the steps outlined on this page within the Chrome or Chrome Canary browser:

To enable Shapes, Regions, and Blend Modes:

  • Copy and paste chrome://flags/#enable-experimental-web-platform-features into the address bar, then press enter.
  • Click the 'Enable' link within that section.
  • Click the 'Relaunch Now' button at the bottom of the browser window.

Note: Multiple features can be enabled before relaunching.

Proceed with caution!!

If you dare, activate experimental features and witness the amazing shapes that can be achieved with images! Wow :)

Here is a sample pen that will only function once the experimental features are enabled => http://codepen.io/anon/pen/yhIbE

If everything goes smoothly, you should see a duck silhouette and a duck in the following paragraph, without any cropping or clipping, all text perfectly wrapped ;)

While still in the experimental stage, these features may eventually be available in all browsers, as they are detailed in the W3C draft.

Cheers!

UPDATE :

Discovered an insightful article on the topic:

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

Enable Component to Exceed to the Following Line

I'm having trouble getting a map of a component to move to the next line (as indicated by the yellow arrow). Currently, instead of moving below, it is squeezing the Component (the Cards). I've added background colors for clarity. Any advice would ...

Scrolling animations do not support the Translate3d feature

I'm struggling to implement a smooth scroll effect on the header of my website. My approach involves using transform:translate3d for animation, with the goal of keeping the header fixed at the top and moving it out of view as the user scrolls down. I ...

Styling a list using multiple columns with CSS

My goal is to design a columned list using only HTML and CSS. I have experimented with floats and inline-block, but it seems like inline-block is the best option for me due to these specific requirements: The layout must be in columns; The number of colu ...

Firefox is having trouble keeping <select> tags within their designated borders

I am currently developing a mobile app that requires the use of 3 <select> elements stacked on top of each other. It is crucial for these tags to align perfectly with each other and not extend beyond the boundaries of the background div. I have manag ...

Designing a dynamic wizard layout using Bootstrap 4 tabs, however encountering issues with the button functionality limited to a

My goal is to create a seamless navigation experience between tabs. <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/b ...

Alter the font color upon clicking the menu using jQuery

When I click on the menu and sub-menu items, I want to change their colors along with their parent. You can see an example of how I want it to work here. However, currently, when I click on a sub-menu item, the color of the parent menu item gets removed. ...

Exploring the benefits of using Div and semantic elements in web

After spending more than two months learning HTML, I still find myself uncertain about the most practical coding approach. Despite knowing that it's important not to overthink it, I often wonder if I should stick with simplicity or add extra elements ...

css - align the arrow to the right in a dropdown

I recently started using a Bootstrap dashboard template created by Creative Tim. I am attempting to incorporate a dropdown list into a table cell, following the standard Bootstrap format: <div class="btn-group"> <button type="button" class="b ...

Whenever I insert an http link for FontAwesome, the icons work perfectly fine. However, when I try to host it locally,

After providing the CDN link: <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet"> The icons are displaying correctly and everything is working fine. You can view the code on ...

Are programmatic clicks distinguishable from manual clicks in JQuery?

Currently, I am in the process of creating selectable and draggable elements for a table. You can test the functionality by following this JsFiddle link (please try vertically selecting). Initially, the selection works well but upon trying to select for th ...

Ways to align images of the same size in a gallery using the margin: auto property

I have an image gallery within a div element named "container" with a specified width:70%. I need the images to be justified with auto margins. This is the HTML code I am using: (There are 4 images in total) <div class="container"> < ...

Leverage the power of effekt in your AngularJS development

Can anyone demonstrate how to implement animation effects with AngularJS? Has someone created an example using Effeckt.css? ...

Tips on utilizing toggleClass to display only the currently active item and obtaining the active class name

I am new to Jquery and CSS/scss and I have successfully created a dynamic boostrap card that resembles a record player. The goal is to generate multiple boostrap cards based on the data in DB, but for simplicity, I am showing only 2 examples below. My ques ...

Tips for concealing the header menu when scrolling on a Drupal website

Hey there, I need some help with hiding the header div while scrolling in Drupal. <header class="header<?php print theme_get_setting('header_top_menu') && !$one_page ? '' : ' header-two'; ?>"> <div clas ...

Dynamic styling updates on page refresh in Next.js

There is a strange issue with my styling that I can't seem to figure out. I have a NavBar set to be 20vh in height and an image set to be 100% in width. However, whenever I refresh the page, the NavBar height decreases and the image width increases si ...

Aligning the page content in perfect harmony with the footer

I've encountered variations of this question in the past, but I haven't found a solution that fits my specific needs. My challenge involves having a footer fixed at the bottom of a page, even when the content doesn't fill the entire page. Ad ...

I am searching for a way to apply a conditional class to the chosen element in react, as the toggle method does not

I'm working on customizing a dropdown menu and I want to add a functionality where if a parent li menu has an arrow class before the ul element, then clicking on that parent li menu will add a class called showMenu only to that specific sub-menu. Her ...

Adding space around images inside a DIV

Hey there! I recently did some work on my website, and now I'm facing a couple of issues. Check out the changes here! After tweaking a few things, the spacing around the images on the index page has gone wonky. I want the padding to be evenly distri ...

Navigating through parent folder HTML files from child folder HTML files

Seeking guidance as I embark on a new project! Check out this link to see my skills in action: collegewebsite.zip Now for the query at hand. I am working on a project named Coffee Cafe for my tuition assignment. It involves utilizing CSS and HTML with J ...

Exploring the process of updating the background color of a specific component in Angular

I'm currently working on a website that will feature alternating colors of white and black. However, I am facing an issue where I can only apply background color changes globally in the CSS file. Does anyone know how to address this problem? ...