html - 有没有办法隐藏可调整大小的 div 右下角的小对 Angular 线？

Question

我想让我的表格列可以调整大小。所以我在 th 中放置了一个 div 并使这些 div 可调整大小。问题是，在每个可调整大小的 div 中都有一对丑陋的对 Angular 线。我该如何摆脱它？

Answer 1

此元素由浏览器本身呈现，不属于 HTML 规范。有一个解决方法，那就是将另一个元素放置在 Angular 落的顶部以隐藏它。

请记住，文本区域仍可调整大小。

textarea {
    position: relative;
    margin: 20px 0 0 20px;
    z-index: 1;
}
.wrap {
    position: relative;
    display: inline-block;
}

.corner {
    height: 0px;
    width: 0px;
    border-top: 10px solid #fff;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    -webkit-transform: rotate(-45deg);
    position: absolute;
    bottom: 4px;
    right: -5px;
    pointer-events: none;
    z-index: 2;
}

<div class="wrap">
    <div class="corner"></div>
    <textarea></textarea>
</div>