CSS - how to make triangle at background?

Question

I'm trying to make a triangle in the background css. I tried to use clip-path :

.triangle-col {
  width: 16px;
  height: 16px;
  background: red;
  cursor: pointer;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

But all the tooltip is blocked by the clip-path. Any ways that I can make a triangle and a down-triangle at the background without using clip-path ?

may be dup - https://stackoverflow.com/questions/23362157/how-to-make-a-css-triangle-background-on-a-div-without-using-border-and-image — Prakash Rajotiya, Nov 29 '19 at 07:52
from the duplicate: https://stackoverflow.com/a/49696143/8620333 — Temani Afif, Nov 29 '19 at 08:36

soulshined · Answer 1 · 2019-11-29T08:20:48.297

The clip-path CSS property creates a clipping region that sets what part of an element should be shown. Parts that are inside the region are shown, while those outside are hidden

So your tooltips are hidden by design.

An alternative to relying on css props, you can use those same polygon techniques with svg, and svg has better browser support

.triangle-col {
  width: 16px;
  height: 16px;
  cursor: pointer;
}

.triangle-col svg {
  fill: red;
}

<div class="triangle-col">
  <svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
    <polygon points="100 0, 0 200, 200 200"></polygon>
  </svg>
</div>

Other orientations:

.triangle-col {
  width: 16px;
  height: 16px;
  cursor: pointer;
  display: inline-block;
}

.triangle-col svg {
  fill: red;
}

<div class="triangle-col">
  <svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
    <polygon points="200 100, 0 0, 0 200"></polygon>
  </svg>
</div>
<div class="triangle-col">
  <svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
    <polygon points="0 100, 200 0, 200 200"></polygon>
  </svg>
</div>
<div class="triangle-col">
  <svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
    <polygon points="0 0, 100 200, 200 0"></polygon>
  </svg>
</div>

Ethan Vu · Answer 2 · 2019-11-29T08:07:53.453

0

You can use another element to host the triangle and apply z-index:-1 and position:absolute to it so it work like background but doesn't block content which overflow the triangle :

.triangle-col {
  width: 16px;
  height: 16px;
  position:relative;
  cursor: pointer; 
}

.triangle-background {
 top: 0;
 left: 0;
 position: absolute,
 width: 100%;
 height: 100%;
 background: red;
 z-index: -1;
 clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

<div class="triangle-col">
   <div class="triangle-background">
   </div>
<div>

edited Nov 29 '19 at 08:07

answered Nov 29 '19 at 08:02

Ethan Vu

2,911
9
25

Edge only supports clip paths defined by url() :( if OP cares. But don't worry us Edge-rs are getting chromium engine here shortly!!! – soulshined Nov 29 '19 at 08:12

CSS - how to make triangle at background?

2 Answers2