Add Outward Curving Border to Elements Like This: ◝◟_◞◜

Add outward curving border to elements like this: ◝◟___◞◜

From the top of my head: draw bottom half border on the element and draw top-left and top-right borders on positioned pseudo elements.

/* using 4px border, 1em border radius, 1em padding */

nav ul {

  font: medium sans-serif;

  text-align: center;

  padding: 0;

  list-style-type: none;

  border-top: 4px solid;

}

nav li {

  display: inline-block;

  border-left: 4px solid transparent;

  border-right: 4px solid transparent;

  border-bottom: 4px solid transparent;

  border-radius: 0 0 1em 1em;

  padding: 0 1em 1em;

  position: relative;

  top: 1em;

}

nav li:before,

nav li:after {

  display: none;

  content: "";

  position: absolute;

  top: -1em;

  width: 1em;

  height: 1em;

  margin-top: -4px;

}

nav li:before {

  right: 100%;

  border-top: 4px solid;

  border-right: 4px solid;

  border-top-right-radius: 1em;

}

nav li:after {

  left: 100%;

  border-top: 4px solid;

  border-left: 4px solid;

  border-top-left-radius: 1em;

}

nav li:hover {

  border-color: initial;

}

nav li:hover:before,

nav li:hover:after {

  display: block;

}

<nav>

  <ul>

    <li>Home</li>

    <li>Random</li>

    <li>Blog</li>

    <li>About us</li>

    <li>Contact Us</li>

  </ul>

</nav>

Border radius of complex shape

You'll need a few extra elements two create the thingies on the left and right.

Note: this works only on a solid background (in this case the white background used on .ws_left:before and .ws_right:before

body { margin: 5em; }

.ws {

  position: relative;

  width: 15em;

  height: 15em;

  background: gray;

  border-radius: 0 0 1em 1em;

}

.ws_left {

  position: absolute;

  top: 0;

  left: -4em;

  right: 100%;

  height: 2.5em;

  background: gray;

  border-radius: 1em 0 0 1em;

}

  .ws_left:before, .ws_left:after,

  .ws_right:before, .ws_right:after {

    content: '';

    position: absolute;

    background: red;

    width: 1em;

    height: 1em;

    top: 100%;

    right: 0;

    z-index: 1;

  }

  .ws_left:before {

    border-top-right-radius: 1em;

    background: white;

    z-index: 2;

  }

  .ws_left:after {

    background: gray;

  }

  .ws_right:before, .ws_right:after {

    right: auto;

    left: 0;

  }

  .ws_right:before {

    border-top-left-radius: 1em;

    background: white;

    z-index: 2;

  }

  .ws_right:after {

    background: gray;

  }

.ws_right {

  position: absolute;

  top: 0;

  left: 100%;

  right: -2em;

  height: 2.5em;

  background: gray;

  border-radius: 0 1em 1em 0;

}

<div class="ws">

  <div class="ws_left"></div>

  <div class="ws_right"></div>

</div>

How to get this shape as border on a menu item?

You could use :after pseudo-element for border and border-radius to create that shape of border.

ul {

  display: flex;

  list-style-type: none;

  flex-direction: column;

  align-items: center;

  padding: 0;

}

li {

  margin: 10px 0;

  position: relative;

  cursor: pointer;

}

li:after {

  content: '';

  width: 130%;

  height: 3px;

  border-radius: 50%;

  position: absolute;

  transform: translateX(-15%);

  background: #5F8AAA;

  left: 0;

  bottom: -5px;

  opacity: 0;

  transition: opacity 0.3s linear;

}

li:hover:after {

  opacity: 1;

}

<ul>

  <li>Lorem ipsum</li>

  <li>Lorem ipsum</li>

  <li>Lorem ipsum</li>

</ul>

Creating 'wing' corner trick with pure css

My approach would be to use the :before and :after pseudoclasses to add and position the corner tips.

.box {

  position: absolute;

  background: gray;

  width: 400px;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  border-radius: 0 0 10px 10px;

}

em {

  display: block;

  font-style: italic;

  font-size: 1.1em;

  color: white;

  text-align: center;

  margin: 0 auto;

  width: 100%;

  line-height: 2.2em;

  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.6);

}

.box:before,

.box:after {

  content: '';

  display: block;

  border: 10px solid transparent;

  border-top: 10px solid gray;  

  position: absolute;

  top: 0;

}

.box:before {

  left: -6px;

}

.box:after {

  right: -6px;

}

<div class="box">

  <em>Benefits Included In Members Savings Package</em>  

</div>

How to design a shape like a bit curvy overlay flap using CSS3

How about this i used svg

<svg width="300" height="200">

    <path d="m 20 20 q 30 15 30 30 l 0 100 h 150 v -100 q 0 -15 30 -30">

Is it possible to create the Firefox tab using CSS ?

if you use a basic <nav> or a list (<ul>) , you could achieve this from a single link(<a>) and pseudo-elements DEMO

nav,

ul {

  padding: 0 0 0.25em;

}

li {

  display: inline-block;

  padding: 0 1.2em;

}

li a {

  display: inline-block;

  line-height: 2em;

  color: white;

  padding: 0 0.5em;

  border-radius: 0 0 2em 2em/2.5em;

  position: relative;

}

li a:before,

li a:after {

  content: '';

  position: absolute;

  height: 2em;

  width: 1.25em;

  top: 0;

}

li a:before {

  right: 100%;

  border-radius: 0 1em 0 0/1.5em

}

li a:after {

  left: 100%;

  border-radius: 1em 0 0 0/1.5em

}

nav {

  background: #0976B8;

}

li a:hover,

li a.active {

  background: white;

  color: #0976B8

}

li a:hover:before,

li a.active:before {

  box-shadow: 0.5em -1em 0 white;

}

li a:hover:after,

li a.active:after {

  box-shadow: -0.5em -1em 0 white;

}

<nav>

 <ul>

  <li><a href="#">Home</a></li>

  <li><a href="#" class="active">About</a></li>

  <li><a href="#">Clients</a></li>

  <li><a href="#">Contact Us</a></li>

 </ul>

</nav>

Hover doesn't react to pointer accurately while working on button inside grid

I change label tag to div and problem fixed!

.options {
  display: grid;
  grid-template-columns: repeat(2, 177.5px);
  gap: 20px;
}

.options button {
  border: 0;
  border-radius: 5px;
  background-color: hsl(183, 100%, 15%);
  color: hsl(189, 41%, 97%);
}

.result-section .reset {
  border: none;
  width: 100%;
  text-align: center;
  background-color: hsl(172, 67%, 45%);
  border-radius: 5px;
  font-weight: 700;
  color: hsl(183, 100%, 15%);
  height: 50px;
  opacity: 0.3;
}

button:hover {
  background-color: hsl(185, 41%, 84%);
}

<div class="selections">
            <p >Select Tip %</p>
            <div class="options">
              <button class="a"  href="">5%</button>
              <button class="a"  href="">10%</button>
              <button class="a"  href="">15%</button>
              <button class="a"  href="">20%</button>
              <button class="a"  href="">25%</button>
              <input class="custom" type="number" placeholder="Custom">
            </div>
          </label>
<div class="items item-3">
  <button class="reset" href="">Reset</button>
</div>

Animation on hover a shapeless zone

I think, it can be achieved by using clip-path for a transparent image. As a clip path you will need to draw a custom SVG graphics (in Adobe Illustrator, I guess).
Look at this example: JSFiddle.
Here in example I used red image to make the result visible

---

Related Topics