如何在伪`after`内容中删除我丑陋箭头标记的底部

Question

＆＃13;

＆＃13;

body{
  background:#fff;
}

.triangle {
  position: relative;
  margin: 3em;
  padding: 1em;
  box-sizing: border-box;
  background: #fff;
  box-shadow: 0px 0 5px 0 rgba(0, 0, 0, 0.4);
  border-radius:5px;
}
.triangle::after{
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    margin-left: -0.5em;
    top: 0;
    right: 1%;
    box-sizing: border-box;
    border: 0.75em solid black;
    border-color: transparent transparent ;
    transform-origin: 0 0;
    transform: rotate(135deg);
    box-shadow: 0px 0px 5px rgba(0, 0, 0, .5);
  }

＆＃13;

<div class="triangle">This is a CSS3 triangle with a proper box-shadow!</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

只需将z-index: -1;添加到伪元素即可将其移至主元素后面：

body{
  background:#fff;
}

.triangle {
  position: relative;
  margin: 3em;
  padding: 1em;
  box-sizing: border-box;
  background: #fff;
  box-shadow: 0px 0 5px 0 rgba(0, 0, 0, 0.4);
  border-radius:5px;
}
.triangle::after{
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    margin-left: -0.5em;
    top: 0;
    right: 1%;
    box-sizing: border-box;
    border: 0.75em solid black;
    border-color: transparent transparent ;
    transform-origin: 0 0;
    transform: rotate(135deg);
    box-shadow: 0px 0px 5px rgba(0, 0, 0, .5);
    z-index: -1;
  }

<div class="triangle">This is a CSS3 triangle with a proper box-shadow!</div>

Answer 2

请用此代码替换“.triangle :: after”并检查它是否能解决您的问题？

.triangle::after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    margin-left: -0.5em;
    top: 0;
    right: 1%;
    box-sizing: border-box;
    border: 0.75em solid black;
    border-color: transparent transparent;
    transform-origin: 0 0;
    transform: rotate(135deg);

    background: #fff;
    box-shadow: -2px 2px 2px 1px rgb(233, 233, 233);
}

Answer 3

这可能有所帮助，看起来也不错

body{
  background:#fff;
}

.triangle {
  position: relative;
  margin: 3em;
  padding: 1em;
  box-sizing: border-box;
  background: #fff;
  box-shadow: 0px 0 5px 0 rgba(0, 0, 0, 0.4);
  border-radius:5px;
}
.triangle::after{
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    margin-left: -0.5em;
    top: 17px;
    right: 1%;
    box-sizing: border-box;
    border: 0.75em solid;
    border-color: #fff;
    transform-origin: 0 0;
    transform: rotate(-133deg);
    box-shadow: 1px 1px 0px rgba(0, 0, 0, 0.3);
  }

<div class="triangle">This is a CSS3 triangle with a proper box-shadow!</div>

Answer 4

相同方法使用here。

Z-index: -1是安全的兄弟