是否可以给一个引导btn 5点？ [英] Is it possible to give a bootstrap btn a 5 point?

问题描述

我想让bootstrap btn看起来有点不同，在它的底部有一个5点。我知道它可能做这样的方式使用：before和：after工具和转换，但我想把文本内，这是为什么我有这么多的麻烦。是否可以直接处理btn类以使此效果发生？

I'm looking to make a bootstrap btn look a little differently with there being a 5 point at the bottom of its base. I know its possible to do shapes this way using the :before and :after tools and transform but I want to put text inside of them which is why I'm having so much trouble. Is it possible to deal directly with the btn class to make this effect happen?

推荐答案

您可以使用 SkewY ，如下面的演示所示：

You can use SkewY as shown in the demo below:

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>

这篇关于是否可以给一个引导btn 5点？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！