-3

I am trying to create a pentagon shape pointed downwards with a text inside it. There are some examples (How to make Background div inner curved using HTML, CSS?, Clippy-CSS clip-path maker ) but those aren't the exact solution what I am looking for (see picture below).

Any help would be greatly appreciated, and thanks.

enter image description here

I resolved the issue:

I had not used ::after pseudo-element before. The pseudo element inserts the content after the content of an element. The above output is derived using a box and downward triangle. 

.card {
    margin: 15px;
    background: #ccc;
    position: relative;
}

.card:after {
    content: '';
    display: block;
    position: absolute;
    border-left: 350px solid transparent;
    border-right: 350px solid transparent;
    border-top: 40px solid #ccc;
    left: 1px;
}

 <div class="card">
  <div class="row">
    <div class="col-md-12">
      <p>Lorem Ipsum</p>
     </div>
   </div>
</div>
npcoder
  • 414
  • 1
  • 5
  • 13
  • 1
    What's your HTML? What did you try? What did you expect/want to happen, and what happened instead? – David Thomas Nov 07 '18 at 16:44
  • 2
    Create a rectangle. Create a triangle. Job done. – Turnip Nov 07 '18 at 16:44
  • @Turnip: I did but could not create slanting corners meeting at a point. If possible, your an example will help me to understand more. – npcoder Nov 07 '18 at 16:49
  • 2
    Read [How do CSS triangles work?](https://stackoverflow.com/questions/7073484/how-do-css-triangles-work) and also [CSS triangle custom border color](https://stackoverflow.com/questions/9450733/css-triangle-custom-border-color) – Turnip Nov 07 '18 at 16:53
  • @Turnip: Thanks. – npcoder Nov 07 '18 at 16:57

2 Answers2

0

This can be done using clip-path.

Basic example - 

clip-path: polygon(50% 100%, 100% 50%, 75% 0, 25% 0, 0% 50%);

You can see further information here

Adam McMahon
  • 765
  • 3
  • 24
0

You can use clip-path: 

clip-path: polygon(50% 0%, 0% 100%, 100% 100%);

Don't forget to use the webkit:

-webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);

Here's an example:

.box {
background-color: gray;
-webkit-clip-path: polygon(100% 0, 100% 39%, 52% 83%, 0 44%, 0 0);
clip-path: polygon(100% 0, 100% 39%, 52% 83%, 0 44%, 0 0);
height: 200px
}
h2 {
text-align: center;
}
<div class="box">
   <h2>Lorum Ipsum</h2>
</div>

You can use this website: https://bennettfeely.com/clippy/ for making easy clip-path's.

willem
  • 42
  • 5