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

The iPhone 6 Plus's Safari browser, when in landscape mode, displays multiple tabs open at once. Additionally, when a Bootstrap modal

Encountering an issue with the bootstrap modal on iPhone Safari 6+ in landscape mode. This glitch only happens when using multiple tabs on the browser. Follow these steps to replicate the problem: 1) Visit http://getbootstrap.com/javascript/ on your iP ...

csstwitter-bootstrapmobile-safariiphone-6-plus

Utilize Custom Field to incorporate background videos from websites like Youtube or Vimeo into your content

I've been working on implementing a video background for my website. I came up with a custom code to embed URL links from Youtube and Vimeo using "oEmbed". The process is functioning well, but I'm facing some challenges in setting the background ...

phpcsswordpressadvanced-custom-fields

Refresh the CSS inheritance and hover effects

Facing an issue with my web project where I am using CSS. At times, I need to reset the inheritance from the parent class for certain elements. Although I have defined some classes to style my elements, I want to completely reset all styles except for hove ...

htmlcsshover

The Bootstrap modal is not properly clearing all attribute properties when it is hidden

Alrighty, so I've got this modal set up: <div id="modal-container" class="modal fade" tabindex="-1" role="dialog"> <div class="modal-dialog" role="document"> <div class="modal-content center-block" style="displ ...

javascriptjqueryhtmlcsstwitter-bootstrap

Envelop the phrases onto a fresh line

I'm having trouble getting the text inside a div to display correctly. When the text is too long, it just keeps stretching instead of breaking into new lines. How can I make sure that the content displays as a block within the div? Thank you. .box ...

htmlcss

What is the best way to include CSS styles in a React app with Webpack?

Having an issue with my React app. Upon successfully compiling Webpack and serving the content, no styles are displayed within the app. This is the current content of my webpack.config.js file: const path = require('path'); const BUILD_DIR = pat ...

cssreactjswebpack

Adjust the width of the button to best fit the content or label

Here we have a screenshot of HTML source code showing a button that is wider than the content it contains. The highlighted area in yellow indicates there is extra space at the right side of the button due to it being displayed on multiple lines. Is this be ...

htmlcssbuttonangular-material-table

Remove the active class after it has been clicked for the second time

Currently, I am working on a menu/submenu system where I want to toggle active classes when clicked. However, I encountered an issue - if the same menu item is clicked twice, I need to remove the active class. Initially, I tried using jQuery's toggleC ...

javascriptjquerycss

Having problems with Javascript and CSS not playing well together?

I have implemented a button from this source, but it does not appear correctly on my page. You can view the screenshot here. It seems like there is a conflict between the saved changes and the CSS. How can I resolve this issue? In addition, I am facing ...

javascriptcssajax

HTML/JavaScript - Ways to show text entered into an input field as HTML code

One dilemma I'm facing involves a textarea element on my website where users input HTML code. My goal is to showcase this entered HTML code in a different section of the webpage. How should I approach this challenge? The desired outcome is similar to ...

javascriptjqueryhtmlcssnode.js

Choose only ul elements up to a specific level of depth

ul, ul ul, ul ul ul { list-style: none; margin: 0; padding: 0; } Inquiry: Is there a specific selector that I can utilize to apply styles to every nth level of ul? For instance: ul > ul ...

htmlcsscss-selectorshtml-lists

The sticky element should only be active when the visible section is overflowing vertically. There should be no scrollbar if the height is minimal

I'm currently working on a Whatsapp-style navigation bar and facing an issue with the sticky navbar functionality. https://i.stack.imgur.com/Cy3lA.gif Please refer to the details below for more information. To resolve this issue, I have included ...

javascripthtmlcss

Customize your CSS line height for the bottom of text only

Hey there, I'm pretty new to frontend development so please excuse me if this is a silly question :) I know that it's not usually done, but when you apply line-height to an element like an h1, it adds extra space both on the top and bottom of th ...

htmlcss

Bootstrap 4 Collapse - Ensuring that collapsed elements remain open when expanding other accordions

Can someone help me figure out how to keep an element open when another one is opened? Here is an example: https://getbootstrap.com/docs/4.0/components/collapse/ <div id="exampleAccordion" data-children=".item"> <div class="item"> & ...

javascripthtmlcssbootstrap-4

Using a zoom background image in an HTML document without any accompanying text

I am trying to create a zoom effect on a background image without affecting the text overlaying it. Here is the CSS code: .page1-box { width: 1200px; height:800px; overflow:hidden; } .page1 { width: 100%; height: 100%; background: ...

jqueryhtmlcss

Bootstrap select box gracefully fits within a dynamically adjusting height div

Can someone help me troubleshoot the issue with displaying/overflowing the .drop-down outside of the .item box in this demo? I need to keep the height of the .item as auto but for some reason, I can't enable overflow visible on it. .item{ backg ...

csstwitter-bootstrap-3bootstrap-select

The reason the CSS direct descendant selector does not affect Angular components

We are working with a basic main.html. <app> <sidebar></sidebar> <main-content> <router-outlet></router-outlet> </main-content> </app> After loading a component through routing (changing the ...

htmlcssangular

Opera browser encountering issue with styled image overlay in select list

We have implemented images in CSS to customize our select fields and they appear correctly in most browsers, except for Opera where the images are not displaying. To better illustrate the issue, I have set up a JSfiddle. Please try it out in Opera to expe ...

htmlcssimageformsselect

Tips for implementing Animation.css in Angular version 1.5.8

I have successfully added the ngAnimate dependency to my AngularJS project: var app=angular.module('testApp',['ngRoute', 'ngAnimate']); I have also included the animation classes in my animation.css file: .slide-animation.n ...

javascriptcssangularjsanimationcss-animations

Make sure that the input field and label are aligned side by side in the

Is there a way to arrange the following HTML in the specified layout? <div> <div> <label>Counterparty</label> <input id="paymentsApp-inpt-cpty" ng-model="selectedPaymentCopy.counterparty" ng-required="true" ...

htmlcss