相关疑难解决方法(0)

我使用border-radius属性来实现圆角.但我不知道如何获得这种形状的圆角.我尝试从两侧给出相同的尺寸,但他们只是不给我确切的形状.我在这里错过了一些CSS3属性.

只是想知道剪辑css属性是否是答案.

更新:

http://jsfiddle.net/YWnzc/136/

我正在尝试创建两个拉长的六边形:

主要特点应该是:

• 添加渐变背景的可能性
• 添加渐变边框的可能性
• 文字可以是双线或单线
• 在Bootstrap网格中响应(很好) - 角的角度应始终相同.

根据仅使用一个元素的Elongated六边形按钮,到目前为止最好的解决方案就像 https://jsfiddle.net/veuc78af/:

/*hexagons*/
 .hexagon {
    box-sizing: border-box;
    position: relative;
    display: inline-block;
    min-width: 200px;
    height: 80px;
    margin: 40px auto;
    color: #fd0;
    text-align: center;
    text-decoration: none;
    line-height: 80px;
}
.hexagon:before, .hexagon:after {
    position: absolute;
    content:'';
    width: 100%;
    left: 0px;
    height: 34px;
    z-index: -1;
}
.hexagon:before {
    transform: perspective(15px) rotateX(3deg);
}
.hexagon:after {
    top: 40px;
    transform: perspective(15px) rotateX(-3deg);
}
/* hexagon Border Style */
 .hexagon.border:before, .hexagon.border:after {
    border: 4px solid …

我正在考虑在按钮之前和之后使用伪元素来实现这个圆边三角形（旋转）和尖角。请参阅照片以获得所需的结果。