background color on polygon figure

Question

I need to set the arrow white background on the same color of the background ,If I set the background on blue and the color on white ,the background non covered zone is white and It should be at the same color of the container background(some kind of grey) Problem image

this is the arrow code

#arrow {
    width: 120px;
    height: 40px;
    position: relative;
    background: blue;
    color: white;
    padding-left: 25px;
    padding-top: 5px;
}

#arrow:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 0;
    border-left: 20px solid white;
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
}

#arrow:before {
    content: "";
    position: absolute;
    right: -20px;
    bottom: 0;
    width: 0;
    height: 0;
    border-left: 20px solid blue;
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
}

I'm not sure about how to fix it.

doğukan · Answer 1 · 2019-02-23T19:09:21.530

1

I made more simple with transform:skew() property. Solves the your problem exactly.

body {
  background: #333;
  padding:30px;
}

#arrow {
  width: 120px;
  height: 40px;
  position: relative;
  color:#fff;
  font-size:22px;
  display:flex;
  align-items:center;
  justify-content:center;
}

#arrow::before {
  content:"";
  width: 120px;
  height: 20px;
  position: absolute;
  top:0;
  left:0;
  background:blue;
  transform:skewX(40deg);
  z-index:-1;
}

#arrow::after {
  content:"";
  width: 120px;
  height: 20px;
  position: absolute;
  top:20px;
  left:0;
  background:blue;
  transform:skewX(-40deg);
  z-index:-1;
}

<div id="arrow">Section</div>

edited Feb 23 '19 at 19:09

answered Feb 23 '19 at 19:01

doğukan

23,073
13
57
69

Works but the text on the arrow div its down the arrow figure `
Text
` ,tried with `z-index` but nothing change – Dsfsf Feb 23 '19 at 19:07
with `z-index:-1` the arrow its inder the container and its not visible if I set `z-index:` >-1 text its not visible. I think I have to set the z indez of the rest of elements – Dsfsf Feb 23 '19 at 19:15
I don't know all your codes, and how your site looks. – doğukan Feb 23 '19 at 19:18
@Dsfsf add z-index:0 to the container and keep -1 to the pseudo element to avoid any issue – Temani Afif Feb 23 '19 at 19:25

score 1 · Accepted Answer · answered Feb 23 '19 at 20:03

1

Here is an idea with multiple background:

.arrow {
  padding:0 20px;
  color:#fff;
  font-size:25px;
  width:120px;
  text-align:center;
  line-height:50px;
  display:inline-block;
  background:
    /*right arrow*/
    linear-gradient(to bottom left, transparent 49%,blue 50%) top right,
    linear-gradient(to top left, transparent 49%,blue 50%) bottom right,
    /*left arrow*/
    linear-gradient(to bottom left, blue 49%,transparent 50%) top left,
    linear-gradient(to top left, blue 49%,transparent 50%) bottom left,
    
    blue content-box;
  background-size:20px 50%;
  background-repeat:no-repeat;
    
}

<div class="arrow">
  some text
</div>

answered Feb 23 '19 at 20:03

Temani Afif

245,468
26
309
415

I'd like to get more info about how you have created the arrow,the gradient on the background do you have any info that helps me to understand it? – Dsfsf Feb 23 '19 at 21:44
@Dsfsf basically it's 4 triangles that will create the full shape, each triangle created with a gradient and placed at a corner .. I advice you to change the coloration of each one to better see and you can check this answer for more details : https://stackoverflow.com/a/49696143/8620333 – Temani Afif Feb 23 '19 at 21:48

background color on polygon figure

2 Answers2