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

Question

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

Answer 1

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

文字区域仍然可以调整大小。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;