html - 如何在伪``之后''内容中删除我的丑陋箭头标记的底部

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);
  }

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

最佳答案

您可以将“ .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);
}

关于html - 如何在伪``之后''内容中删除我的丑陋箭头标记的底部，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/48169039/