主页 / 问题 / 1095911
Accepted
daladn0
Asked:2020-03-17 23:46:45 +0000 UTC2020-03-17 23:46:45 +0000 UTC

几何形状的阴影

  • 772

我们在网站上需要一个类似的三角形：在此处输入图像描述

像这样创建：

&__triangle {
    position: absolute;
    top: -35px;

    width: 0;
    height: 0;
    border-bottom: 45px solid #FFF;
    border-left: 30px solid transparent;
    border-right: 30px solid transparent;
    box-shadow: 0px 0px 10px 0px rgba(0,0,0, 0.1);
}

正如你所看到的，它就像它所在的方块一样，有一个阴影，如果为方块添加阴影没有问题，那么当你尝试以通常的方式将它添加到三角形时（box-shadow: 0px 0px 10px 0px rgba(0,0,0, 0.1);），出现以下异常：

在此处输入图像描述

css

2 个回答

  1. body {
  padding-top: 100px;
}

.line {
  height: 5px;
  
  background-color: #d55858d6;
}

.nav {
  position: relative;
  overflow: hidden;
  
  height: 50px;
  background-color: #ebebeb;
}

.triangle {
  position: absolute;
  transform: rotate(45deg);
  left: 50px;
  bottom: -10px;
  
  width: 20px;
  height: 20px;
  
  background-color: #fff;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
}
    <header>
  <div class="line"></div>
  <nav class="nav">
    <div class="triangle"></div>
  </nav>
</header>

    • 4
  2. Best Answer

    我做了一个小悬停效果的例子

    .nav {
  display: flex;
  justify-content: space-around;
  position: relative;
  padding-bottom: 60px;
  width: 600px;
  margin: auto;
  font-family: sans-serif;
}

.item {
  text-align: center;
  width: 100%;
  cursor: pointer;
}

h3 {
  color: tomato;
}

span {
  color: #ccc;
}

.svg {
  position: absolute;
  left: 0px;
  bottom: 0;
  height: 40px;
  overflow: hidden;
  transition: 0.34s linear;
}

.b:hover~.svg {
  margin-left: 32.5%;
}

.c:hover~.svg {
  margin-left: 67%;
}
    <div class="nav">
  <div class="item a">
    <h3>John Doe</h3>
    <span>Co-Founder</span>
  </div>
  <div class="item b">
    <h3>Emila Lake</h3>
    <span>Producer</span>
  </div>
  <div class="item c">
    <h3>Lidia Suvorova</h3>
    <span>Reporter</span>
  </div>
  <div class="svg">
    <svg width="200" height="40">
      <defs>
      <linearGradient id="g1" x1="0%" y1="0%" x2="100%" y2="0%">
        <stop offset="0%" stop-color="#fff" stop-opacity="30%" />
        <stop offset="100%" stop-color="#ccc" stop-opacity="70%" />
      </linearGradient>
      <linearGradient id="g2" x1="0%" y1="0%" x2="100%" y2="0%">
        <stop offset="0%" stop-color="#ccc" stop-opacity="70%" />
        <stop offset="100%" stop-color="#fff" stop-opacity="30%" />
      </linearGradient>
      </defs>
      <path d="M0,0 100,0 100,10, 80,40 0,40z" fill="url(#g1)"/>
      <path d="M100,0 100,10 120,40 200,40 200,0" fill="url(#g2)"/>
    </svg>
  </div>
</div>

    • 2

相关问题