CODEWITHSUNDEEP
htmlcss
Momin
Momin

Reputation: 3320

Positioning an SVG icon over CSS border

Here I'm trying to position an SVG icon over a CSS border, but I'm facing a problem with the CSS border. As per the design, the border should be in the background, and the icon will be in front. I'm trying to solve using z-index!

Design

enter image description here

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.5064C5.16715 16.546 5.04767 16.6259 4.95889 16.7355C4.87133 16.8441 4.81936 16.9777 4.8102 17.1176C4.80104 17.2575 4.83515 17.3969 4.90778 17.5163C5.63 18.6997 6.97444 19.1677 8.27222 19.1677C8.76111 19.1677 9.24333 19.1014 9.68333 18.9821C10.51 18.7571 11.3322 18.3622 12.1011 17.8301H12.1033C12.4105 18.063 12.7477 18.2523 13.1056 18.3926V18.3938ZM10 0C15.5222 0 20 3.49537 20 10.2487C20 10.8934 19.9089 11.5673 19.7444 12.2591C19.2233 14.1401 17.2956 16.5578 15.3222 17.1461C15.0599 17.2262 14.7883 17.2705 14.5144 17.2778C14.2898 17.283 14.0654 17.2569 13.8478 17.2001C13.6313 17.1424 13.4235 17.0554 13.23 16.9414L13.2122 16.9301C13.42 16.7355 13.6211 16.5296 13.8144 16.3136L13.8678 16.2551C14.9367 15.0626 16.2678 13.5776 16.05 11.6764C15.9544 10.8371 15.5111 10.1014 14.8644 9.70537C14.2844 9.34987 13.5922 9.29138 12.9133 9.54113C11.6067 10.0215 10.8056 11.3715 10.4911 12.4751C10.0611 13.9894 10.3244 15.6442 11.1378 16.8289C10.5778 17.2 9.96466 17.4815 9.32 17.6636C9.09778 17.7232 8.86556 17.7649 8.62889 17.7874C8.77111 17.7154 8.90445 17.6299 9.02889 17.532C9.46 17.1911 9.94889 16.5409 9.83778 15.372C9.71111 14.0355 9.08333 12.8003 8.53 11.7101L8.33 11.313C8.29087 11.2375 8.25086 11.1625 8.21 11.088C7.98778 10.6684 7.81 10.3151 7.67111 10.017L7.72667 9.86737C7.93778 9.30937 8.29 8.37337 7.66 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.4179 3.13444 16.47 2.00222 16.5566C0.825556 14.3955 0 12.1882 0 10.2487C0 3.49537 4.47778 0 10 0Z" fill="#FF4816"/>
</svg>
</span>



</div>

Upvotes: 0

Views: 382

Answers (1)

Minal Chauhan
Minal Chauhan

Reputation: 6148

Add background in span same as the background and add padding in it:

.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.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.5064C5.16715 16.546 5.04767 16.6259 4.95889 16.7355C4.87133 16.8441 4.81936 16.9777 4.8102 17.1176C4.80104 17.2575 4.83515 17.3969 4.90778 17.5163C5.63 18.6997 6.97444 19.1677 8.27222 19.1677C8.76111 19.1677 9.24333 19.1014 9.68333 18.9821C10.51 18.7571 11.3322 18.3622 12.1011 17.8301H12.1033C12.4105 18.063 12.7477 18.2523 13.1056 18.3926V18.3938ZM10 0C15.5222 0 20 3.49537 20 10.2487C20 10.8934 19.9089 11.5673 19.7444 12.2591C19.2233 14.1401 17.2956 16.5578 15.3222 17.1461C15.0599 17.2262 14.7883 17.2705 14.5144 17.2778C14.2898 17.283 14.0654 17.2569 13.8478 17.2001C13.6313 17.1424 13.4235 17.0554 13.23 16.9414L13.2122 16.9301C13.42 16.7355 13.6211 16.5296 13.8144 16.3136L13.8678 16.2551C14.9367 15.0626 16.2678 13.5776 16.05 11.6764C15.9544 10.8371 15.5111 10.1014 14.8644 9.70537C14.2844 9.34987 13.5922 9.29138 12.9133 9.54113C11.6067 10.0215 10.8056 11.3715 10.4911 12.4751C10.0611 13.9894 10.3244 15.6442 11.1378 16.8289C10.5778 17.2 9.96466 17.4815 9.32 17.6636C9.09778 17.7232 8.86556 17.7649 8.62889 17.7874C8.77111 17.7154 8.90445 17.6299 9.02889 17.532C9.46 17.1911 9.94889 16.5409 9.83778 15.372C9.71111 14.0355 9.08333 12.8003 8.53 11.7101L8.33 11.313C8.29087 11.2375 8.25086 11.1625 8.21 11.088C7.98778 10.6684 7.81 10.3151 7.67111 10.017L7.72667 9.86737C7.93778 9.30937 8.29 8.37337 7.66 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.4179 3.13444 16.47 2.00222 16.5566C0.825556 14.3955 0 12.1882 0 10.2487C0 3.49537 4.47778 0 10 0Z" fill="#FF4816"/>
    </svg>
  </span>
</div>

Upvotes: 1

Related Questions