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

Question

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>

Answer 1

你能用这段代码替换“.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);
}