我正在寻找一个bootstrap btn看起来有点不同,有一个5点在其底部的底部。我知道可以用这样的方式来做这种形状:before和before:工具和转换,但我想把文本放在里面,这就是为什么我有这么多麻烦。是否有可能直接处理btn课程以使这种效果发生? 是否可以给bootstrap btn 5分?
0
A
回答
1
您可以使用SkewY
如下图所示的演示:
div {
height: 100px;
width: 500px;
display: inline-block;
border: 10px solid green;
border-bottom: none;
text-align: center;
line-height: 100px;
position: relative;
color: green;
font-size: 20px;
}
div:before,
div:after {
content: "";
border-bottom: 10px solid green;
position: absolute;
width: calc(50% + 10px);
height: 100%;
top: 0;
}
div:before {
transform: skewY(5deg);
left: -10px;
}
div:after {
transform: skewY(-5deg);
left: 50%;
}
<div>Request a Quote</div>
+0
谢谢jbutler。我正在使用SkewY,但我无法重现形状。宽度calc是新东西,我没有意识到我可以做到。谢谢! – Bs3kg
0
梯度可以是第一芯片方案......在情况
例如:http://codepen.io/gc-nomade/pen/wGEyvd
button {
color:green;
display:block;
width:50%;
margin:1em auto;
padding:1.5em 0 2.5em;
border:none;
background:linear-gradient(to left, green, green) top,
linear-gradient(to bottom, green,green) top left,
linear-gradient(to bottom, green,green) top right,
linear-gradient(to bottom left, transparent 45%, green 47%, green 51%, transparent 52%) bottom left,
linear-gradient(to bottom right, transparent 45%, green 47%, green 51%, transparent 52%) bottom right;
background-repeat:no-repeat;
background-size:100% 3px, 3px 70%, 3px 70%,50% 30%, 50% 30%;
}
<button>REQUEST A CODE</button>
相关问题
- 1. 与Bootstrap v4-alpha-5对齐.btn-group
- 2. 是否可以分配给$!在Perl中?
- 3. bootstrap btn-group stay inline
- 4. knockout.js bind bootstrap btn-group
- 5. twitter-bootstrap 3失败支持btn btn-mini
- 6. 是否可以迭代Bootstrap列表?
- 7. 是否可以自定义Bootstrap?
- 8. twitter bootstrap btn-nav总是显示
- 9. 是否可以为Twitter Bootstrap弹出窗口分配一个ID?
- 10. bootstrap表单中不需要bootstrap btn-group?
- 11. 是否可以从iOS 5降级?
- 12. Twitter上的Bootstrap“下拉切换”上的“btn btn-block btn-lg btn-primary”?
- 13. Titanium&Xcode 5是否可以分发iOS 6应用程序?
- 14. bootstrap btn组错误对齐
- 15. 不带btn类的Bootstrap“button”
- 16. 使用CDN,是否可以对div应用bootstrap?
- 17. 我可以在我的.btn Bootstrap类中添加什么,以免浮肿消失?
- 18. 可能使标签中的文本与类“btn btn-default”(Bootstrap 3.3.7)匹配背景?
- 19. Bootstrap:是否可以定义两种类型的链接?
- 20. 是否可以区分窗口拆分?
- 21. 是否可以在Bootstrap Modal上显示和隐藏表单域?
- 22. Bootstrap with Rails 5
- 23. 是否可以将多个变量分配给单个主机?
- 24. 是否可以将多个规则流组分配给规则?
- 25. 是否可以将sql表值分配给php中的变量?
- 26. 是否可以在运行时将接口分配给对象?
- 27. '范围'功能是否可以分配给列表?
- 28. 是否可以给css属性一个负的百分比值?
- 29. 是否可以将MultiIndex分配给空的DataFrame?
- 30. 确定是否可以为给定值分配反射属性
你有什么试过的?这不是一个代码写作服务,所以一定要去,如果你遇到困难,我们很乐意提供帮助。 –