Sharp one side corner

Question

Trying to make sharp corner of side of menu, i have used border-radius

.right-section-top-bar.row {
    background-color: #44d2ff;
    border-radius: 0 0 0 100px;
}

but its no giving sharp corner. But i don't want that radical part. I also tried to make an triangle and then positioned it with that bar, but i think its not the best solution may be some thing to do with before and after.

check http://stackoverflow.com/questions/10883963/css-is-there-any-way-to-create-a-sharp-corner-not-a-round-one-a-flat-sharp-c — nunoarruda, Jan 11 '16 at 08:50

score 6 · Accepted Answer · answered Jan 11 '16 at 08:59

You could achieve that with css :before pseudo-elements like this:

div:before {
  content: "";
  width: 0px;
  height: 0px;
  border-style: solid;
  border-width: 0px 40px 40px 0px;
  border-color: transparent #44d2ff transparent transparent;
  position: absolute;
  top: 0px;
  margin-left: -40px;
}

div {
  position: relative;
  left: 100px;
  width: 200px;
  height: 40px;
  background: #44d2ff;
}

<div></div>

Amber · Answer 2 · 2016-01-11T09:57:44.423

Responsive pseudo-element

To avoid breaking your design when your want a responsive element, you can use calc() to set the width with CSS. Check Can I Use for browser support and this for a working example. When you change the width of the .block, you see that the pseudo-elements are resizing as well.

   .block {
      position:relative;
      height:300px;
      width: 300px;
      background: purple;
    }

    .block:before {
      content: "";
      border-top: 40px solid purple;
      border-left: 40px solid transparent;
      position: absolute;
      bottom: -40px;
    }

    .block:after {
        content: "";
        width: -webkit-calc(100% - 40px);
        width: -moz-calc(100% - 40px);
        width: calc(100% - 40px);
        height: 40px;
        background: purple;
        position: absolute;
        bottom: -40px;
        margin-left: 40px;
    }

After reading your question again I see this isn't the kind of solution where you were looking for, since your example contains text, but maybe this is helpful for other future projects.

Sharp one side corner

2 Answers2

Responsive pseudo-element