CSS:倾斜按钮边框，而不是文本 [英] CSS: Skew a buttons border, not the text

问题描述

我正在寻找一种使用单个标签(只是< a> )的简单方法来在边框上产生偏斜效果，但保持文本原样.

I'm looking for an easy way with a single tag (just <a>)to create a skew effect on the borders, but keep the text the way it is.

我想知道如何在内部或外部使用跨度，但是我不想在页面上添加额外的，几乎为零的HTML.

I would know how do with a span in- or outside, but I don't want to have additional, pretty much zero meaning HTML on the page.

下面的例子.

推荐答案

您可以使子元素倾斜，即提供与您为父元素指定的相反的倾斜坐标.

You can unskew the child element i.e. provide the opposite skew co-ordinates as you specified for the parent.

这是一个可行的示例

假设您的html如下，

Suppose you have below as you html,

<div class="btn">
    <button><div class="btn-text">Click</div></button>
</div>

如果我们将父元素倾斜 20deg ，那么我们应该通过 -20deg 倾斜子元素

If we skew the parent element by 20deg then we should skew the child element by -20deg as,

.btn {
    -ms-transform: skewX(20deg); /* IE 9 */
    -webkit-transform: skewX(20deg); /* Safari */
    transform: skewX(20deg);
}
.btn-text {
    -ms-transform: skewX(-20deg); /* IE 9 */
    -webkit-transform: skewX(-20deg); /* Safari */
    transform: skewX(-20deg);
    padding: 20px;
}

这篇关于CSS:倾斜按钮边框，而不是文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！