make CSS corner style

Question

I am confused, how to make the design of display options like this with css :

this

how to make corner style like this picture ... please help me. thanks

I think OP is talking about the [arrow](http://www.cssarrowplease.com/). — Maharkus, Dec 06 '17 at 10:03
Please include what you have tried so far. https://stackoverflow.com/help/mcve — sol, Dec 06 '17 at 10:05
Either way not a very clear question. Please elaborate on what you want and also what you have tried so far. — Maharkus, Dec 06 '17 at 10:05
Possible duplicate of [How do CSS triangles work?](https://stackoverflow.com/questions/7073484/how-do-css-triangles-work) — domsson, Dec 06 '17 at 10:40

score 0 · Answer 1 · answered Dec 06 '17 at 10:14

0

<div class='arrow'></div>

.arrow{
  width: 30px;
  height: 80px;
  background-color: #999;
  -webkit-clip-path: polygon(0 50%, 100% 0, 100% 100%, 0 50%);
  clip-path: polygon(0 50%, 100% 0, 100% 100%, 0 50%);
}

clip-path uses multiple X and Y coords to create an svg. You can minipulate as you like but that kinda makes what you need.

answered Dec 06 '17 at 10:14

Gezzasa

1,443
8
17

1

Using `clip-path` will seriously limit your browser support, you'd be better off with the old border hack that everyone uses. – DBS Dec 06 '17 at 10:16
Why so complicated. we can use borders anytime to create arrows like these – nikamanish Dec 06 '17 at 10:17
First thing I thought of. And if we all put in the effort, we can forget about IE 9 and 10 :). @nikamanish It's not really complicated. Your's is better, yes – Gezzasa Dec 06 '17 at 10:23

score 0 · Accepted Answer · answered Dec 06 '17 at 10:16

Try this:

.inner{
  height: 300px;
  width: 200px;
  background-color: red;
  border-radius: 10px;
}

.outer{
  padding: 10px;
  background-color: green;
  display: inline-block;
  border-radius: 20px;
  position: relative;
  margin-left: 100px;
}

.arrow{
 position: absolute;
 top: 30px;
 left: -50px;
 border: 25px solid transparent;
 border-right: 25px solid green;
}

<div class="outer">
  <div class="inner"></div>
  <div class='arrow'>
</div>

make CSS corner style

2 Answers2