html - 如何使用 css 进行此设计？

Question

这个问题在这里已经有了答案:





CSS ribbon with inside arrow on the right

(2 个回答)



Using CSS borders to create shapes with pseudo-elements with same height as parent

(1 个回答)


去年关闭。




我正在尝试进行此设计，但无法获得任何成功？我无法克服这个问题任何帮助都是可观的

我附上了我想要的设计的图像



这是我尝试过的代码

.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

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

.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>