Placing an SVG icon on top of a CSS border

I'm currently working on positioning an SVG icon over a CSS border, but I'm running into an issue with the layering of the border. The design calls for the border to be in the background, while the icon should be in the foreground. I'm experimenting with using the z-index property to achieve this!

Design

https://i.sstatic.net/9eHpw.png

Output

.se-venue-cta {
  width: 300px;
  text-align: center;
  margin: 5% auto;
  background: #000;
  background: #FFF1EA;
  box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.25);
  padding: 20px;
  position: relative;
  z-index: 2;
}

.se-venue-cta-text p {
  color: #FE6F48;
  text-align: center;
}

.se-venue-cta-text {
  border: 2px solid #FE6F48;
  border-radius: 10px;
  margin-bottom: 30px;
}

.se-venue-cta-btn {
  height: 44px;
}

.se-venue-cta-btn a {
  transition: all 0.3s ease-in-out;
  display: flex;
  background: #FE6F48;
  border-radius: 6px;
  height: 100%;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  color: #ffffff;
  font-weight: bold;
  font-size: 16px;
}

span {
  display: block;
  position: absolute;
  left: 50%;
  top: 8px;
  transform: translateX(-50%);
  z-index: 999;
  overflow: hidden;
}
<div class="se-venue-cta">
  <div class="se-venue-cta-text">
    <p> The average wedding costs $33,900. Get a quote now and let us plan you a beautiful elopement, while saving you over $28,000</p>
  </div>

  <div class="se-venue-cta-btn">
    <a href=""> Get a Quote </a>
  </div>

  <!--   svg icon -->
  <span>
  <svg width="20" height="27" viewBox="0 0 20 27" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.7889 15.4035C12.6086 15.6051 12.4191 15.798 12.2211 15.9818C11.6767 15.1346 11.5056 13.9309 11.8133 12.8475C12.0244 12.1027 12.5644 11.1263 13.39 10.8225C14.1 10.5615 14.6111 11.1791 14.6856 11.8305C14.8344 13.1242 12.79 15.4035 12.79 15.4035H12.7889ZM13.1056 18.3938C13.9133 18.7054 14.7944 18.7301 15.7156 18.4556C16.3041 18.2729 16.8621 18.0017 17.3711 17.6512C14.41 22.5911 10 27 10 27C10 27 5.66778 22.6688 2.70556 17.7806C3.57333 17.4521 4.46778 16.5656 5.37333 15.129C5.97556 14.175 6.55889 13.0028 7.03889 11.8046L7.1 11.9216C7.16667 12.0566 7.23556 12.1916 7.30444 12.3266C7.82667 13.3571 8.36778 14.4214 8.47111 15.4991C8.53444 16.1764 8.26444 16.3913 8.17445 16.4621C7.71889 16.8221 6.70778 16.8435 5.71222 16.5139C5.57924 16.4695 5.43609 16.4669 5.30162 16.506...


</div>

htmlcss

Answer №1

To create a background in the span element that matches the overall background and to include padding within it, follow these CSS instructions:

.se-venue-cta {
  width: 300px;
  text-align: center;
  margin: 5% auto;
  background: #000;
  background: #FFF1EA;
  box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.25);
  padding: 20px;
  position: relative;
  z-index: 2;
}

.se-venue-cta-text p {
  color: #FE6F48;
  text-align: center;
}

.se-venue-cta-text {
  border: 2px solid #FE6F48;
  border-radius: 10px;
  margin-bottom: 30px;
}

.se-venue-cta-btn {
  height: 44px;
}

.se-venue-cta-btn a {
  transition: all 0.3s ease-in-out;
  display: flex;
  background: #FE6F48;
  border-radius: 6px;
  height: 100%;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  color: #ffffff;
  font-weight: bold;
  font-size: 16px;
}

span {
  display: block;
  position: absolute;
  left: 50%;
  top: 8px;
  transform: translateX(-50%);
  z-indix: 999;
  overflow: hidden;
  background
}

.svg-wrap {
  background: #FFF1EA;
  padding: 0 10px;
}
<div class="se-venue-cta">
  <div class="se-venue-cta-text">
    <p> The average wedding costs $33,900. Get a quote now and let us plan you a beautiful elopement, while saving you over $28,000</p>
  </div>

  <div class="se-venue-cta-btn">
    <a href=""> Get a Quote </a>
  </div>

  <!--   svg icon -->
  <span class="svg-wrap">
    <svg width="20" height="27" viewBox="0 0 20 27" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path fill-rule="evenodd" clip-rule="evenodd" d="M12.7889 15.4035C12.6086 15.6051 12.4191 15.798 12.2211 15.9818C11.6767 15.1346 11.5056 13.9309 11.8133 12.8475C12.0244 12.1027 12.5644 11.1263 13.39 10.822... 7.70625C7.52713 7.56253 7.35976 7.4561 7.17419 7.39735C6.98862 7.3386 6.79118 7.32952 6.60111 7.371C6.44788 7.40464 6.30451 7.47403 6.18241 7.57363C6.06031 7.67323 5.96285 7.80031 5.89778 7.94475C5.68667 8.40825 5.77 9.0585 6.20333 10.0935C5.11 13... 5.7278 0.639679 5.6 0.660002 5.5 0.660002Z" fill="#FF4816"/>
    </svg>
  </span>
</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

if the condition is not met, proceed to the alternate template eventually

Hey there, I'm facing an issue with my code that resembles something like this: <ng-container *ngIf="firstCondition; else Farewell"> <ng-container *ngIf="innerContainer"> <div class="Hello Message"> {{HelloMessa ...

htmlangular

The dropdown functionality in Bootstrap appears to be malfunctioning

Struggling to make the drop-down menu function properly in Bootstrap, but so far no success. Check out the code on this jsfiddle link. <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-to ...

cssdrop-down-menubootstrap-4

Preventing overlapping of a "position-fixed" element with variable size: Effective strategies

I am trying to keep a fixed element visible at the top of the page while also having content with varying heights. Here is the CSS code for the fixed element: div.topfloat { position: fixed; top: 0; width: 100%; } The issue I'm facing is ...

htmlcss

Is there a way to remove the initial number entered on a calculator's display in order to prevent the second number from being added onto the first one?

I am currently in the process of developing a calculator using HTML, CSS, and JavaScript. However, I have encountered an issue with my code. After a user inputs a number and then clicks on an operator, the operator remains highlighted until the user inputs ...

javascripthtmlcssfrontendcalculator

Enhancing spacing in Bootstrap 5 with additional spacers

Looking to enhance the spacers in Bootstrap 5 by incorporating it into Sass and customizing the variables. I'm aiming to avoid redundantly defining Bootstrap's spacer options, which are as follows: $spacers: ( 0: 0, 1: $spacer * .25, 2: $s ...

htmlcsssassbootstrap-5

HTML and CSS: Focus on border for <td> cells only

I'm looking to apply a border to only one cell (B2) without nesting tables. Here's the code: <table border="0"> <tr> <td>A1</td> <td>B1</td> <td>C1</td> </tr> ...

htmlcsshtml-tableborder

Bringing in typefaces to enhance your email signature

I am trying to design a unique email signature with a custom Adobe font. My email account is hosted by Strato, a German mail server. However, when I attempted to insert the signature using Apple Mail, I realized that the CSS <style> part was not bein ...

cssemailfontsadobesignature

Is it possible to include a border/stroke on a Raphael picture?

Currently, I am attempting to enhance a Raphael image element by adding either a border, stroke, or drop shadow. My end goal is to create an animated glowing border effect. Previously, I successfully implemented this on traditional HTML elements using Java ...

javascriptcssimageraphael

Running a CSS keyframes animation can be achieved by removing the class associated with it

Is there a way to reverse the CSS animation when a class is removed? I'm trying to achieve this on my simple example here: https://codepen.io/MichaelRydl/pen/MWPvxex - How can I make the animation play in reverse when clicking the button that removes ...

javascripthtmlcss

Uncheck all boxes except for the required or disabled boxes in Angular

HTML: <mat-selection-list #selectedColumns [(ngModel)] ="selectedOptions"> <div class= "content-section"> <mat-expansion-panel> <mat-expansion-panel-header> ...

htmlangularcheckboxvoiddeselect

displaying HTML on the web page only, without appearing in the text input field

update1: I have updated the image to provide better clarity https://i.sstatic.net/hYLsI.png I am currently working on implementing chip filters similar to Google Flights. When selecting "sports," it currently displays "sports1" and replaces "sports" with ...

javascripthtmlreactjsreduxmaterial-ui

I am looking to incorporate a scroll feature into my form, as it is being displayed within a modal that is a separate component

Due to the size of my employee form exceeding the screen capacity, I need to incorporate a scroll property into my modal content. The form contains numerous fields that cannot be modified. Could you assist me in resolving the scrolling issue? Thank you! ...

cssreactjs

Generate a table framework by dynamically adjusting the number of rows and columns

I'm running into an issue with my implementation of nested for-loops to dynamically generate a table using JavaScript. For this particular scenario, let's assume numRows = 2 and numCols = 6. This is the code snippet in question: let table = $( ...

javascriptjqueryhtml

The Vue component that was added dynamically is failing to render

When I have a section of HTML with Vue components inside it, coming from a server, and then insert it on the page by clicking a button, the components are not rendering or showing up. Here is the HTML that gets inserted when the button is clicked: <sec ...

htmlvue.jsvue-component

Achieving both vertical and horizontal center alignment specifically for mobile devices

Is there a way to center a column on mobile devices only while maintaining a fixed height for the section? <div class="" style="background-image: url(image url;); background-position: right bottom; background-size: cover; height: 462px;"> <div cl ...

twitter-bootstrapcssbootstrap-4center

Ways to conceal HTML tags within a text box

Currently, I am utilizing PHP to extract content from a text file and display it in a textbox. However, I am interested in finding a way to conceal the HTML tags within the textbox (as shown in the image) without deleting them, making them invisible to use ...

phphtmlcsstextboxtags

Interactive pop-up text box for data cells in a table

I have implemented a textarea in the td cell of each row within column 3 to store description specific to that row. The goal is for the current description in the td's textarea to be copied over to the textarea located inside #div_toggle when the user ...

htmljquerycss

in Vue.js, extract the style of an element and apply it to a different element

Currently, I am using VUE.js 2 in my project. Here is my website's DOM structure: <aside :style="{height : height()}" class="col-sm-4 col-md-3 col-lg-3">...</aside> <main class="col-sm-8 col-md-9 col-lg-9" ref="userPanelMainContents" ...

javascriptjqueryhtmlcssvue.js

How can I address the problem of adjusting the title to match the size of the image in question?

I need help creating a design where an image and h2 title appear on top of the image... Below is a reference screenshot: I am looking to achieve something similar. CSS: h2 { position: relative; letter-spacing: 1px; display: inline-block; positi ...

jqueryhtmlcss

Mastering image focus with javascript: A comprehensive guide

On my HTML page, I have two images and a textbox. I want the focus to shift between the images based on the first character entered in the textbox. For example, when the user types '3', the first image should be focused, and for '4', th ...

javascripthtmlcss