How to change the background color of a random shape if I want multiple colors? - Html

Habizsabi
April 14, 2023
140 views
0 votes
2 Answers

So basically I have a emblem/shield shape and I want to have it 4 different colors on each edge. Like on this pic but obviously with 4 different color:
https://us.123rf.com/450wm/konstantinks/konstantinks1403/konstantinks140300271/26709864-medieval-shield-on-white-background.jpg?ver=6

I’ve made the shield and it looks like this:
https://codepen.io/Franklin777111/pen/abRdMep

I’ve tried adding filter with black bg like so:

 filter: invert(13%) sepia(57%) saturate(4049%) hue-rotate(357deg) brightness(97%) contrast(116%);

or an other div with position absolute but those are not following the shape of the emblem.

Any ideas or should I change the code completely to do this?

Answers

Not sure about this but … You maybe can to something with this

.outer {
  overflow-X: hidden;
  width:150px;
  height: 200px;
  
}
.inner {
  border: 1px solid #888;
  position: relative;
  background-color: #888;
}
.inner i {
  width: 40px;
  height: 80px;
  border: 1px solid #888;
  border-radius: 50%;
  background-color: white;
}

.inner .top {
  margin-top: 20px;
  
}
.bottom-square-right{
  width: 22px;
  height: 21px;
  border-bottom: 1px solid #888;
  border-right: 1px solid #888;
  border-top-right-radius:9%;
  rotate: 45deg;
  position: absolute;
  right: 3px;
  bottom: -12px;
  z-index: 2;
  background-color: #888;
}
.bottom-square-left{
  width: 20px;
  height: 21px;
  border-bottom: 1px solid #888;
  border-right: 1px solid #888;
  border-bottom-left-radius:11%;
  rotate: 45deg;
  position: absolute;
  left: 3px;
  bottom: -12px;
  z-index: 2;
  background-color: #888;
}
.inner .left {
  float: left;
  margin-left: -20px;
}
.inner .right {
  float: right;
  margin-right: -20px;
}
.content {
  min-height: 120px;
}

#parent {
    width: 75px;
    height: 75px;
  position: absolute;
   top: 100%;
  left: 50%;
  transform: translate(-50%, -50%);
 
}
 
#shield {
    position: relative;
    width: 100%;
    height: 70%;
    background-color: #888;
    border-radius: 0 0 70% 70%;
    display: inline-block;
    z-index: -30;
}
#shield:before, #shield:after {
    position: absolute;
    margin-top: 50%;
    content:"";
    left: 50%;
    top: 0;
    width: 50%;
    height: 37%;
    background: #888;
    border-radius: 70% 70% 0 0;
    -webkit-transform: rotate(-61.5deg);
    -moz-transform: rotate(-61.5deg);
    -ms-transform: rotate(-61.5deg);
    -o-transform: rotate(-61.5deg);
    transform: rotate(-61.5deg);
    -webkit-transform-origin: 0 100%;
    -moz-transform-origin: 0 100%;
    -ms-transform-origin: 0 100%;
    -o-transform-origin: 0 100%;
    transform-origin: 0 100%;
}
#shield:after {
    background-color: #888;
    left: 0;
    -webkit-transform: rotate(61.5deg);
    -moz-transform: rotate(61.5deg);
    -ms-transform: rotate(61.5deg);
    -o-transform: rotate(61.5deg);
    transform: rotate(61.5deg);
    -webkit-transform-origin: 100% 100%;
    -moz-transform-origin: 100% 100%;
    -ms-transform-origin: 100% 100%;
    -o-transform-origin: 100% 100%;
    transform-origin :100% 100%;
}



.quarter {
  position: absolute;
  z-index:1000;
  width: 35%;
  height: 40%;
}

.top-left {
  top: 10%;
  left: 15%;
  background-color: red; 
}

.top-right {
  top: 10%;
  right: 15%;;
  background-color: blue; 
}

.bottom-left {
  bottom: 10%;
  left: 15%;;
  background-color: green;
}

.bottom-right {
  bottom: 10%;
  right: 15%;
  background-color: yellow;
}

<div class="outer">
  
  <div class="inner">
    <div class="quarter top-left"></div>
    <div class="quarter top-right"></div>
    <div class="quarter bottom-left"></div>
    <div class="quarter bottom-right"></div>
    <i class="top left"></i>
    <i class="top right"></i>
    <div class="content"></div>
    <div class="bottom-square-right"></div>
    <div class="bottom-square-left"></div>
      <div id="parent">
        <div id="shield"></div>
      </div>
  </div>
</div>

You can use 16-color svg files and illustrator program but you should convert it with online svg url encoder tools. I hope it works for you.

.container {
  display:block;
  width:450px;
  height:450px;
  margin:0 auto;
  background-repeat: no-repeat ;
  background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='Layer_2' data-name='Layer 2' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 548.09 548.09'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: none; stroke: %23231f20; stroke-dasharray: 0 0 20.25 20.25; stroke-miterlimit: 10; stroke-width: 200px; %7D .cls-2 %7B fill: %23740001; %7D .cls-3 %7B fill: %23feda00; %7D .cls-4 %7B fill: %238a8a87; %7D .cls-5 %7B fill: %23f9f8f5; %7D .cls-6 %7B fill: %23e6e7e8; %7D .cls-7 %7B fill: %231b482b; %7D .cls-8 %7B fill: %23888787; %7D .cls-9 %7B fill: %23222f5b; %7D %3C/style%3E%3C/defs%3E%3Cg%3E%3Ccircle class='cls-6' cx='274.04' cy='274.04' r='174.04'/%3E%3Ccircle class='cls-1' cx='274.04' cy='274.04' r='174.04'/%3E%3C/g%3E%3Cg%3E%3Cpath class='cls-9' d='M273.96,496.05c-6.25-4.45-11.05-10.42-16.51-15.7-2.02-1.95-3.97-2.8-6.83-2.88-23.38-.67-46.17-4.38-67.76-13.73-10.08-4.36-19.4-9.91-27-17.96-4.92-5.21-8.6-11.11-9.87-18.27,.16-1.27,2.13-2.53,.77-3.64-1.42-1.16-2.34,.72-3.34,1.53-.71,.58-1.32,1.28-1.97,1.93-11.1,11.01-22.27,21.95-33.25,33.07-2.24,2.27-3.48,2.39-5.77,.05-8.89-9.09-17.87-18.1-27.1-26.86-4.61-4.38-7.37-8.5-6.84-15.64,1.01-13.66,.32-27.44,.27-41.18,0-2.24,.14-3.73,3.12-3.69,8.04,.11,14.94-3.08,21.15-7.9,12.98-10.08,20.13-24.01,25.74-38.86,8.37-22.12,11.09-45.18,11.14-68.64,40.42,.01,80.85,.03,121.27,.04,.09,6.53,.23,13.06,.26,19.59,.03,5.7,.05,8.92-7.66,9-.19,0-.37,.69-.57,1.1h25.51c-.48-.94-1.02-1.27-1.55-1.26-4.53,.04-6.75-1.98-6.66-6.65,.11-5.62-.01-11.25-.19-16.87-.07-2.26,.47-3.32,3.03-3.14,3.51,.25,7.05,.15,10.57,.2,0,78.78,0,157.57,0,236.35Z'/%3E%3Cpath class='cls-3' d='M273.96,496.05c0-78.78,0-157.57,0-236.35,3.38-.05,6.77,.03,10.14-.19,2.53-.16,3.13,.91,3.07,3.2-.13,4.88,.01,9.76-.05,14.64-.1,7.37-.44,7.73-7.78,9.11-.15,.03-.22,.48-.42,.93h25.26q-8.11-2.79-8.1-11.85c.02-5.95,.11-11.89,.16-17.83,40.59,0,81.18,.01,121.77,.02-.03,15.91,1.3,31.69,4.82,47.24,4.16,18.32,10.36,35.82,22.39,50.7,8.07,9.99,17.79,17.36,31.49,17.45,3.15,.02,2.37,2.15,2.38,3.8,.04,14.65-.14,29.31,.13,43.96,.07,3.89-1.1,6.66-3.78,9.29-10.84,10.62-21.65,21.28-32.31,32.08-2.47,2.5-3.94,2.85-6.59,.12-8.42-8.7-17.13-17.12-25.73-25.65-4.25-4.21-8.46-8.45-12.76-12.61-1.8-1.75-3.27-2.2-2.95,1.25-2.25,13.11-10.39,22.14-20.98,29.33-16.7,11.34-35.63,16.87-55.33,20.08-7.26,1.18-14.62,1.83-21.96,2.46-2.49,.21-4.23,1.14-5.99,2.8-5.63,5.33-10.52,11.45-16.89,16.02Z'/%3E%3Cpath class='cls-7' d='M418.01,257.71c-40.59,0-81.18-.01-121.77-.02-.06-4.72-.16-9.44-.17-14.16q-.03-9.88,9.11-13.82h-27.03c.97,.8,1.25,1.22,1.59,1.28,7.12,1.31,7.23,1.41,7.41,8.35,.04,1.52,.01,3.05,.01,4.57q0,13.01-13.21,11.96c0-41.47,0-82.94-.01-124.41,0-2.28,.86-4.86-3.29-4.94-15.04-.31-29.97-1.86-44.6-5.41-11.31-2.74-22.46-6.01-32.54-12.05,.73-.57,1.38-.25,2.11,.08,18.9,8.5,38.82,12.68,59.45,14.33,28.93,2.31,57.25-.16,84.85-9.35,10.98-3.66,21.17-8.87,30.35-15.89,2-1.53,3.57-3.62,5.34-5.45,33.07,0,66.14,0,99.21-.02,2.37,0,4.43-.35,4.39,3.35-.19,16.16-.12,32.33-.04,48.49,.01,2.32-.64,3.23-3.12,3.21-8.03-.06-14.94,3.08-21.15,7.9-11.4,8.83-18.33,20.82-23.74,33.75-9.12,21.82-12.48,44.8-13.14,68.25Z'/%3E%3Cpath class='cls-2' d='M193.51,109.07c10.09,6.03,21.23,9.3,32.54,12.05,14.64,3.55,29.57,5.1,44.6,5.41,4.15,.09,3.29,2.66,3.29,4.94,.02,41.47,.01,82.94,.01,124.41-3.53,.08-7.07,.04-10.59,.27-2.56,.17-3.09-.98-3.02-3.23,.13-4.27-.05-8.55,.06-12.82,.19-7.78,.31-7.86,8.02-9.35,.14-.03,.19-.49,.38-1h-25.66c.7,1.94,1.97,1.26,2.92,1.36,3.41,.37,5.4,2.08,5.38,5.59-.04,7.01-.15,14.01-.23,21.02-40.42-.01-80.85-.03-121.27-.04-.36-12.52-1.41-24.97-3.92-37.27-4.12-20.25-10.52-39.6-23.93-55.91-7.83-9.53-17.35-16.54-30.47-16.68-2.78-.03-2.84-1.41-2.83-3.43,.04-16.03,.09-32.07-.04-48.1-.02-2.9,.94-3.56,3.7-3.55,33.27,.12,66.53,.12,99.8,.16,5.21,5.56,11.23,10.14,17.7,14.14,.38,.2,.76,.4,1.13,.6,0,0,.45,.03,.45,.03,0,0,.18,.41,.18,.41,.33,.16,.67,.32,1,.49,.27,.17,.54,.35,.8,.52Z'/%3E%3Cpath class='cls-8' d='M172.24,92.89c-33.27-.03-66.53-.04-99.8-.16-2.76,0-3.72,.65-3.7,3.55,.14,16.03,.08,32.07,.04,48.1,0,2.02,.06,3.4,2.83,3.43,13.12,.14,22.64,7.15,30.47,16.68,13.4,16.3,19.8,35.65,23.93,55.91,2.5,12.3,3.56,24.75,3.92,37.27-.05,23.47-2.78,46.52-11.14,68.64-5.61,14.85-12.76,28.77-25.74,38.86-6.22,4.83-13.11,8.01-21.15,7.9-2.98-.04-3.13,1.45-3.12,3.69,.05,13.73,.74,27.52-.27,41.18-.53,7.14,2.23,11.26,6.84,15.64,9.22,8.76,18.21,17.77,27.1,26.86,2.29,2.34,3.53,2.22,5.77-.05,10.98-11.12,22.15-22.06,33.25-33.07,.65-.65,1.26-1.35,1.97-1.93,.99-.81,1.92-2.69,3.34-1.53,1.35,1.11-.62,2.37-.77,3.64-1.98,.07-2.78,1.77-3.93,2.9-11.47,11.3-22.93,22.6-34.27,34.02-2.1,2.12-3.05,2.13-5.27-.15-10.57-10.89-21.36-21.56-32.26-32.12-3-2.91-4.18-6.26-4.2-10.11-.08-16.03-.05-32.05,0-48.08,0-1.62-.82-3.91,2.42-3.68,14.92,1.04,25.04-7.07,33.38-17.88,11.56-14.99,17.51-32.47,21.06-50.74,7.1-36.49,5.6-72.54-7.26-107.71-4.43-12.13-10.56-23.38-20.1-32.5-7.39-7.07-15.85-11.57-26.43-10.84-2.52,.17-3.15-.68-3.14-3.03,.07-18.16,.08-36.33,0-54.49-.01-2.45,.84-3.09,3.2-3.08,32.79,.06,65.59,.05,98.39,.01,2.28,0,3.84,.75,4.67,2.88Z'/%3E%3Cpath class='cls-4' d='M418.01,257.71c.66-23.46,4.02-46.43,13.14-68.25,5.4-12.93,12.33-24.92,23.74-33.75,6.22-4.82,13.12-7.95,21.15-7.9,2.47,.02,3.13-.89,3.12-3.21-.07-16.16-.15-32.33,.04-48.49,.04-3.7-2.02-3.35-4.39-3.35-33.07,.02-66.14,.02-99.21,.02,1.03-2.26,2.85-2.8,5.24-2.79,32.48,.06,64.96,.07,97.45-.02,2.82,0,3.67,.75,3.65,3.59-.12,17.86-.06,35.71-.07,53.57,0,1.8,.42,3.69-2.65,3.5-14.68-.95-24.76,6.94-33.02,17.65-11.57,14.99-17.55,32.43-21.14,50.69-7.18,36.48-5.7,72.52,7.09,107.7,4.84,13.31,11.57,25.64,22.68,35.05,6.78,5.74,14.5,9.23,23.63,8.58,2.61-.18,3.48,.49,3.47,3.17-.1,16.33-.03,32.66-.07,48.99,0,2.98-1.16,5.63-3.26,7.74-12.31,12.39-24.69,24.72-36.98,37.12-2.35,2.37-3.22-.12-4.3-1.18-12.78-12.58-25.49-25.23-38.25-37.83-1.16-1.15-2.05-2.75-3.96-2.95-.32-3.45,1.15-2.99,2.95-1.25,4.29,4.16,8.51,8.4,12.76,12.61,8.6,8.53,17.32,16.94,25.73,25.65,2.64,2.73,4.12,2.39,6.59-.12,10.65-10.81,21.47-21.46,32.31-32.08,2.68-2.63,3.85-5.4,3.78-9.29-.27-14.65-.09-29.31-.13-43.96,0-1.65,.77-3.78-2.38-3.8-13.69-.09-23.42-7.47-31.49-17.45-12.03-14.88-18.23-32.38-22.39-50.7-3.53-15.54-4.86-31.33-4.82-47.24Z'/%3E%3Cpath class='cls-7' d='M191.08,107.63c-.38-.2-.76-.4-1.13-.6,.56-.14,1.32-.65,1.13,.6Z'/%3E%3Cpath class='cls-7' d='M192.7,108.55c-.33-.16-.67-.33-1-.49,.38-.04,.77-.07,1.15-.11-.05,.2-.1,.4-.15,.59Z'/%3E%3Cpath class='cls-5' d='M251.21,257.72c.08-7.01,.19-14.01,.23-21.02,.02-3.51-1.97-5.22-5.38-5.59-.95-.1-2.22,.58-2.92-1.36h25.66c-.18,.51-.24,.98-.38,1-7.7,1.49-7.82,1.57-8.02,9.35-.11,4.27,.08,8.55-.06,12.82-.07,2.25,.46,3.4,3.02,3.23,3.52-.23,7.06-.19,10.59-.27q13.21,1.05,13.21-11.96c0-1.52,.03-3.05-.01-4.57-.19-6.94-.29-7.05-7.41-8.35-.34-.06-.62-.48-1.59-1.28h27.03q-9.12,3.94-9.11,13.82c.01,4.72,.11,9.44,.17,14.16-.06,5.94-.15,11.89-.16,17.83q-.03,9.05,8.1,11.85h-25.26c.19-.45,.26-.9,.42-.93,7.34-1.38,7.69-1.73,7.78-9.11,.06-4.88-.08-9.76,.05-14.64,.06-2.28-.54-3.36-3.07-3.2-3.37,.21-6.76,.14-10.14,.19-3.53-.05-7.06,.05-10.57-.2-2.56-.18-3.1,.88-3.03,3.14,.18,5.62,.3,11.25,.19,16.87-.09,4.66,2.13,6.68,6.66,6.65,.53,0,1.07,.32,1.55,1.26h-25.51c.2-.4,.38-1.1,.57-1.1,7.71-.09,7.69-3.31,7.66-9-.04-6.53-.17-13.06-.26-19.59Z'/%3E%3C/g%3E%3C/svg%3E");
}

<div class="container">
</div>

Please signup or login to give your own answer.

Click here to cancel reply.

How to change the background color of a random shape if I want multiple colors? – Html

Answers