How can I change the border radius of this hexagon shaped div without breaking structure?

Question

I have an hexagon shapped div where I am placing input field but I would like to have round corners, however, it breaks shape if I change border-radius:

https://jsfiddle.net/burimsyla/0cbou4wr/43/

 div {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 30px 20px;
  border: none;
  font-family: sans-serif;
}
div .header {
  flex-basis: 100%;
  margin: -10px 0 10px;
  text-align: center;
  color: #1E9BAF;
}
div input,
div button {
  flex-grow: 1;
  height: 30px;
  margin: 0 5px;
  padding: 0 5px;
  box-sizing: border-box;
  background-color:#1E9BAF;
 border: 0;
}

.rhombus {
  position: relative;
  -webkit-perspective: 600px;
  perspective: 600px;
  border-radius: 10px;
}
.rhombus:before,
.rhombus:after {
  content: "";
  position: absolute;
  left: 0;
  height: 50%;
  width: 100%;
  background-color: #1E9BAF;
  z-index: -1;
}
.rhombus:before {
  top: 0;
  -webkit-transform: rotateX(30deg);
  -webkit-transform-origin: center bottom;
  -ms-transform: rotateX(30deg);
  -ms-transform-origin: center bottom;
  transform: rotateX(30deg);
  transform-origin: center bottom;
  /*box-shadow: 3px 5px #DDD;*/
}
.rhombus:after {
  bottom: 0;
  -webkit-transform: rotateX(-30deg);
  -webkit-transform-origin: center top;
  -ms-transform: rotateX(-30deg);
  -ms-transform-origin: center top;
  transform: rotateX(-30deg);
  transform-origin: center top;
  /*box-shadow: 5px 5px #DDD;*/
}

<div class="rhombus">
  <input name="name" placeholder="An input field"/>
</div>

Besides that problem, can anyone tell me how to change the width of this hexagon without breaking the shape of it? For how it looks please refer to the fiddle link I provided above!

score 2 · Answer 1 · answered Sep 14 '20 at 10:47

https://jsfiddle.net/dvpatel/drp9c6ku/

div {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 30px 20px;
    border: none;
    font-family: sans-serif;
}

div .header {
    flex-basis: 100%;
    margin: -10px 0 10px;
    text-align: center;
    color: #1E9BAF;
}

div input,
div button {
    flex-grow: 1;
    height: 30px;
    margin: 0 5px;
    padding: 0 5px;
    box-sizing: border-box;
    background-color: #1E9BAF;
    border: 0;
}

.rhombus {
    position: relative;
    -webkit-perspective: 600px;
    perspective: 600px;
    border-radius: 10px;
}

.rhombus:before,
.rhombus:after {
    content: "";
    position: absolute;
    left: 0;
    height: 50%;
    width: 100%;
    background-color: #1E9BAF;
    z-index: -1;
}

.rhombus:before {
    top: 0;
    -webkit-transform: rotateX(30deg);
    -webkit-transform-origin: center bottom;
    -ms-transform: rotateX(30deg);
    -ms-transform-origin: center bottom;
    transform: rotateX(30deg);
    transform-origin: center bottom;
    border-radius: 10px 10px 0 0;
}

.rhombus:after {
    bottom: 0;
    -webkit-transform: rotateX(-30deg);
    -webkit-transform-origin: center top;
    -ms-transform: rotateX(-30deg);
    -ms-transform-origin: center top;
    transform: rotateX(-30deg);
    transform-origin: center top;
    border-radius: 0 0 10px 10px;
}

<div style="width:auto">
    <div class="rhombus">
        <input name="name" placeholder="Ваше имя"/>
    </div>
</div>

nice but you are not changing all the borders radius https://jsfiddle.net/burimsyla/gLctypfe/15/ — showtime, Sep 14 '20 at 10:55

score 1 · Answer 2 · answered Sep 14 '20 at 10:48

1

You've got two pseudo elements, &:before and &after. To get rounded corners you have to set border-radius on top for the &:before: border-radius: 5px 5px 0 0; and on the bottom for the &after: border-radius: 5px 5px 0 0;

answered Sep 14 '20 at 10:48

pistevw

432
4
15

what about the ones in the middle? – showtime Sep 14 '20 at 10:59
Maybe this will help: https://stackoverflow.com/questions/24819717/how-to-make-a-curved-edge-hexagon-by-using-css – pistevw Sep 14 '20 at 11:14

Warden330 · Answer 3 · 2020-09-14T11:04:41.067

Edit: roundend middle-corners So to change the border-radius you need to apply it to the individual corners, comments in CSS code explain that.

For the width i suggest giving the parent element a class and a fixed with so the 100% width can apply. Also you need to give the 100%width to the whole rhombus class as well as the after and before pseudo-elements

div {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 30px 20px;
  border: none;
  font-family: sans-serif;
}
.parentdiv{
  width: 500px; /*replaced width auto with a class and a fixed with*/
}
div .header {
  flex-basis: 100%;
  margin: -10px 0 10px;
  text-align: center;
  color: #1E9BAF;
}
div input,
div button {
  flex-grow: 1;
  height: 30px;
  margin: 0 5px;
  padding: 0 5px;
  box-sizing: border-box;
  background-color:#1E9BAF;
 border: 0;
}

.rhombus {
  position: relative;
  -webkit-perspective: 600px;
  perspective: 600px;
  width: 100%;/*this is what you need to change the width*/
}
.rhombus:before,
.rhombus:after {
  content: "";
  position: absolute;
  left: 0;
  height: 50%;
   width: 100%;
  background-color: #1E9BAF;
  z-index: -1;
  
}
.rhombus:before {
  top: 5px; /*change this to add together with bottom in the after: pseudo element to the corner-rounding*/
  -webkit-transform: rotateX(30deg);
  -webkit-transform-origin: center bottom;
  -ms-transform: rotateX(30deg);
  -ms-transform-origin: center bottom;
  transform: rotateX(30deg);
  transform-origin: center bottom;
  /*box-shadow: 3px 5px #DDD;*/
  border-radius: 10px 10px 10px 10px;/*This is how you can round single corners*/
}
.rhombus:after {
  bottom: 5px;
  -webkit-transform: rotateX(-30deg);
  -webkit-transform-origin: center top;
  -ms-transform: rotateX(-30deg);
  -ms-transform-origin: center top;
  transform: rotateX(-30deg);
  transform-origin: center top;
  /*box-shadow: 5px 5px #DDD;*/
  border-radius: 10px 10px 10px 10px;/*This is how you can round single corners*/
 
}

<div class="parentdiv">
<div class="rhombus">
<input name="name" placeholder="Ваше имя"/>
</div>

</div>

you are not changing the radius of the borders in two sides (middle ones) — showtime, Sep 14 '20 at 10:58
edited it. you can shift the position of the shapes psuedo-elements by setting top: /bottom: to shift them over each other again when you have the rounded middle corners — Warden330, Sep 14 '20 at 11:05
@dontdownvoteme just be aware that this changes the height of the whole visible thing as we basically place them a bit on top of each other — Warden330, Sep 14 '20 at 11:07

score 1 · Accepted Answer · answered Sep 14 '20 at 19:38

I would do the shape differently and consider an SVG filter for the rounded part. Simply adjust the stdDeviation to control the radius:

.box {
  width: 200px;
  height: 80px;
  background: #1E9BAF;
  color: #fff;
  text-align: center;
  line-height: 80px;
  clip-path: polygon(20px 0, calc(100% - 20px) 0%, 100% 50%, calc(100% - 20px) 100%, 20px 100%, 0 50%);
}

.wrapper {
  display: inline-block;
  filter: url('#goo');
}

<div class="wrapper">
  <div class="box">
    some text
  </div>
</div>
<svg style="visibility: hidden; position: absolute;" width="0" height="0" xmlns="http://www.w3.org/2000/svg" version="1.1">
    <defs>
        <filter id="goo"><feGaussianBlur in="SourceGraphic" stdDeviation="5" result="blur" />    
            <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9" result="goo" />
            <feComposite in="SourceGraphic" in2="goo" operator="atop"/>
        </filter>
    </defs>
</svg>

I am doing something else now but I will mark this as the correct answer because it is the closest to my request. — showtime, Sep 15 '20 at 08:29

How can I change the border radius of this hexagon shaped div without breaking structure?

4 Answers4