Transforming a CSS Clip Path into an SVG Clip Path without the need for an image

I have a basic HTML structure:

.btn_clip {
  display: block;
  width: 524px;
  height: 170px;
  background: #ed1c23;
  font-size: 25px;
  color: #fff;
  text-align: center;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  line-height: 170px;
  text-decoration:none;
}
<a href="#" class="btn_clip">LEARN MORE</a>

However, the `clip-path` property doesn't work in IE. I'm looking to convert it to SVG instead of using an image tag. How can I achieve the same output with SVG?

csssvgclip-path

Answer №1

If you encounter this situation, the recommended approach is to utilize 

clipPathUnits="objectBoundingBox"
. A polygon with the following points will be required: 
points=".5 0, 1 .5, .5 1, 0 .5"
. This means that 50% should be represented as .5 and 100% should be represented as 1, etc.

.btn_clip {
  display: block;
  width: 524px;
  height: 170px;
  background: #ed1c23;
  font-size: 25px;
  color: #fff;
  text-align: center;
  -webkit-clip-path: url(#clip);
  clip-path: url(#clip); 
  line-height: 170px;
  text-decoration:none;
}

svg{position:absolute; left:-10em;}

<a href="#" class="btn_clip">DISCOVER MORE</a>;

<svg width="0" height="0">
  <clipPath id="clip" clipPathUnits="objectBoundingBox">
     <polygon points=".5 0, 1 .5, .5 1, 0 .5"/>
  </clipPath>
</svg>

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

Swap out the current image for a different one

When a user clicks on different image or color options, I want to change the main image displayed. Below are the links to the alternative images: https://i.sstatic.net/DxJEb.jpg This is the HTML code: <div class="container"> <p class="img-main" ...

javascriptjqueryhtmlcss

Determine the overall cost based on varying percentage increases for each step

I am currently working on developing a price estimation calculator. Here is the breakdown: For 1000 MTU, the price will be 0.035, resulting in a total of 35. For 2000 MTU, the price will be 0.034, making the total 67. For 3000 MTU, the price will be 0.03 ...

javascripthtmljquerycss

Removing a jQuery class while simultaneously adding it to different elements

I am currently working on a webpage where I have a row of 6 images. The first image, when the page loads, undergoes transformations using CSS3 due to a specific class applied to it. When the user hovers over the other images in the line, the same class is ...

jqueryhtmlcss

Best Practices for Implementing the 960 CSS Clear Class

I'm puzzled by the necessity of using the clear class in the 960 css framework. Every time I remove a div with the clear class, everything seems to function properly. Can you explain to me the significance and purpose behind this class? ...

cssframeworks960.gs

Overlaying content: Innovative dropdown menu design

My goal is to create a dropdown box that overlays the content of a div when an icon within it is clicked. However, currently, the dropdown box is pushing down the content of the div instead of overlaying it. I have tried adjusting my CSS by setting some el ...

javascripthtmlcss

How can I dynamically update the content of the right side of the side navbar by clicking on navbar links?

I have a side-navigation bar with content on the right side. How can I display specific content on the right side when clicking on a navigation link? For example, only show the name when clicking on the name link and only show the password field when click ...

javascripthtmlcssbootstrap-5

In which location are HTML files stored within WordPress plugins?

Can someone help me locate the HTML files within WordPress plugins? I'm looking to make edits to the HTML and CSS files of a plugin, but I can't seem to find the specific HTML file. Any guidance on where these files are stored would be greatly ap ...

htmlcsswordpressplugins

Customize the appearance of an ASP link button within a navigation menu

Just getting started with ASP.net and CSS, I want to customize my link button using CSS similar to other <a href> buttons, but I seem to be running into some issues. This is the code for my menu: <div id="templatemo_menu"> <ul ...

htmlasp.netcss

Utilizing Vue CSS variables as inline styles

Incorporating CSS variables in my component has allowed me to dynamically set the width of a div based on computed data within the setup() setup(props) { const progressBar = PositionService.getProgressBar(props.position); const progressWidth = `${p ...

cssvue.jscontent-security-policy

The ellipsis text-overflow feature occasionally malfunctions during a single session when using IE 11

.show-ellipsis { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } <div class="container"> <div class="row show-ellipsis"> {{record.bodyName}} </div> </div> My web application supports versions o ...

htmlcss

Forming a space between borders

I'm attempting to create a space within a div's border that can accommodate an image, much like so: Is there a method to achieve this using only CSS? The only solution I have found is: .box { background: url(img.png) bottom left; border ...

cssimageborder

Highlighting the active nav-item in Bootstrap-5 is proving to be a challenge

I'm having trouble with the Bootstrap navbar. I want to change the color of the active nav-link, but it's not working as expected. I am currently using Bootstrap-5. Below is the CSS code I have: .nav-link { color: #666777; font-weight: 4 ...

htmlcssbootstrap-5

I am having trouble with my custom-button class not successfully overriding the btn background color property. Can anyone provide insight

Utilizing the bootstrap5 variant-button mixin, I aim to create a custom-colored button. While I have successfully altered the default hover effect color, I am encountering difficulty in setting the background color of the button itself. Upon inspecting the ...

htmlcsssassbootstrap-5

Disabling the movement of arrows in the client-testimonials-carousel plugin

This plugin that I'm currently using is working flawlessly: However, I'm unsure about how to make the arrows stationary and prevent them from moving. Currently, they are centering themselves based on the height of the div, but I want them to rem ...

javascriptjqueryhtmlcss

Stylish Interactive Menu Item

Having a fixed navigation at the bottom of my website has presented me with an issue. The hover effect, specifically the background slide, triggers before I even place my mouse over the text. Currently, the background slides up when my mouse enters the .it ...

htmlcssnavigation

HTML5 header video with a subtle color palette

Is there a way to insert a muted video in the header that spans the full width but only has a height of 300px? The issue I am encountering is that when I decrease the height of the video, the width automatically decreases as well. However, what I want is ...

csshtmlbootstrap-4

The datatable does not adjust to changes in page size

My jsfiddle example showcases different card boxes, and I am currently focusing on making the 'Table 1' box responsive. However, I have encountered an issue: Check out my jsfiddle example here code If you open the jsfiddle with a large enough ...

javascripthtmlcssbootstrap-4datatable

Contrasts in Bootstrap 5.3 color schemes between development and live environments

Currently in the process of building a website using Astro [^2.2.1], Bootstrap [5.3.0-alpha3], and Svelte [^3.58.0]. Most components are functioning correctly, except for some elements like buttons where the foreground and background colors seem off. I&apo ...

csssassbootstrap-5astrojs

What is the best way to position an image behind textboxes?

Need help with moving an image behind textboxes and a sign-in button? Check out my issue: https://i.stack.imgur.com/cGoEU.png The image is currently covering the login form. How can I position it properly? Here's the code snippet causing the issue: ...

htmlcssimagebuttontextbox

Replace minor components (SVG) within the primary SVG illustration

I'm interested in transforming SVG elements into the main SVG element. For example, let's say the black square represents the main SVG element. I want to change elements 1, 2, and 3 to different SVG elements using JavaScript code. However, I am u ...

javascripthtmlcsssvg