JSFiddle - React, Tailwind, and code Playground

Скругления

by Ankhena

HTML

<ul class="menu">

  <li class="active"><a href="">link</a>
    <ul class="submenu">
      <li><a href="">link</a></li>
      <li><a href="">link</a></li>
      <li><a href="">link</a></li>
      <li><a href="">link</a></li>
    </ul>
  </li>
  <li><a href="">link</a></li>
  <li><a href="">link</a></li>
  <li><a href="">link</a></li>

</ul>

SCSS

* {
  box-sizing: inherit;
}

html {
  box-sizing: border-box;
}

body {}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.menu {
  display: flex;

  a {
    display: block;
    padding: 10px;
  }
}

.active {
  position: relative;


  &>a {
    position: relative;
    border-radius: 10px 10px 0 0;
    background: #bebebe;

    &::after {
      content: "";
      position: absolute;
      bottom: 0;
      left: 100%;
      display: block;
      width: 15px;
      height: 15px;
      background: radial-gradient(at top right, transparent 15px, #bebebe 16px) no-repeat right bottom / 15px 15px;

    }
  }
}

.submenu {
  position: absolute;
  top: calc(100% - 1px);
  left: 0;
  width: 200%;
  border-radius: 0 10px 0 0;
  background: #bebebe;
}