html - 如何使用css来进行这样的设计？

Question

我正在尝试做这个设计，但没有取得任何成功？我无法克服这个问题任何帮助将是可观的

我正在附上我想要的设计的图像

这是我尝试过的代码

.auth__container {
    min-height: 70%;
    width: 50%;
    margin: 2rem;
    border-radius: .4rem;
    background-color: #fff;
    box-shadow: 0 0.125rem 0.25rem rgba(0,0,0,.075);
    -webkit-transition: all .5s ease;
    transition: all .5s ease;
}

.auth__nav {
    list-style: none;
    margin-left: 10%;
    padding: 0;
    background: #e8e6e6;
    width: 50%;
    
}

.auth__nav-heading {
    width: 50%;
    background-color: #e42a70;
    position: relative;
    top: 0;
    left: -1rem;
    height: 4rem;
    color: #fff;
}

.auth__nav-heading:before {
    border-width: 0 1rem 1rem 0;
    border-color: transparent blue;
    left: 0;
    bottom: -1rem;
}  

<ul class="auth__nav"><li class="auth__nav-item auth__nav-heading">Sign up</li><li class="auth__nav-item">Login</li></ul>

我希望边框底部应该像我标记的图像中那样指向，但我没有明白，任何人都可以帮我解决这个问题吗？

Answer 1

您可以使用具有 position:absolute 的 css 三 Angular 形 #triangle 来实现:

.auth__container {
    min-height: 70%;
    width: 50%;
    margin: 2rem;
    border-radius: .4rem;
    background-color: #fff;
    box-shadow: 0 0.125rem 0.25rem rgba(0,0,0,.075);
    -webkit-transition: all .5s ease;
    transition: all .5s ease;
}

.auth__nav {
    list-style: none;
    margin-left: 10%;
    padding: 0;
    background: #e8e6e6;
    width: 50%;
    
}

.auth__nav-heading {
    width: 50%;
    background-color: #e42a70;
    position: relative;
    top: 0;
    left: -1rem;
    height: 4rem;
    color: #fff;
}

.auth__nav-heading:before {
    border-width: 0 1rem 1rem 0;
    border-color: transparent blue;
    left: 0;
    bottom: -1rem;
}  

#triangle {
  position: absolute;
  top: 100%;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 1rem 1rem 0;
  border-color: transparent #e42a70 transparent transparent;
}

<ul class="auth__nav">
  <li class="auth__nav-item auth__nav-heading"><span id="triangle"></span>Sign up</li>
  <li class="auth__nav-item">Login</li>
</ul>