Question

我遇到了一个奇怪的问题。我想要达到的是“拉伸钻石形状”按钮。这是一个以三角形开头的形状，然后是一个延伸的直中间和另一个三角形。对于这种形状，我想出了以下CSS：

#button-medium {
    height: 30pt;
    position: relative;
    display: inline-block;
    background-color: #ff7e39;
}
#button-medium:before {
    content:"";
    position: relative;
    display: inline-block;
    border-bottom: 15pt solid transparent;
    border-right: 15pt solid #ff7e39;
    border-top: 15pt solid transparent;
    margin-left: -15pt;
}
#button-medium:after {
    content:"";
    position: relative;
    display: inline-block;
    border-bottom: 15pt solid transparent;
    border-left: 15pt solid #ff7e39;
    border-top: 15pt solid transparent;
    margin-right: -15pt;
}

这会生成我正在寻找的形状，甚至可以扩展内容。一切都很好。我的问题是，当我想用这个形状和一些文字。文本被粘贴到我正在使用的span或div的底部！我已经尝试过填充，在内部保留其他div，似乎没有任何效果。这是我的HTML

<!DOCTYPE html>
<html>
<head>
    <title>&deg;</title>
    <link href="css/52Noord.css" rel="stylesheet">
</head>
<body>
<div align="center"><div id="button-medium"><span style="padding-bottom: 3pt">The Text</span></div></div>
</body>
</html>

知道如何实现这种形状并让它包含居中（垂直和水平）文本吗？

Here is a JSFiddle.

Answer 1

您基本上需要将position:relative和:before中的:after更改为floats。然后为line-height

中的内容提供span

更新了CSS：

#button-medium span {
    line-height: 40px;
}
#button-medium:before {
    content:"";
    float: left;
    border-bottom: 15pt solid transparent;
    border-right: 15pt solid #ff7e39;
    border-top: 15pt solid transparent;
    margin-left: -15pt;
}
#button-medium:after {
    content:"";
    float: right;
    border-bottom: 15pt solid transparent;
    border-left: 15pt solid #ff7e39;
    border-top: 15pt solid transparent;
    margin-right: -15pt;
}

演示：http://jsfiddle.net/L8gRw/

DIV中的文字粘在底部

1 个答案: