Question

如何制作一个钝角的按钮？

我想像这样发生

我来到这里

我的代码 - Fiddle

＆＃13;

*{
  box-sizing: border-box;
}

.btn{  
  display: inline-block;
  padding: 16px 30px;
  color: #fff; 
  border: 1px solid #4A803C;
  position: relative;
  border-radius: 3px;
  background: rgb(74,168,28); /* Old browsers */
background: -moz-linear-gradient(top, rgba(74,168,28,1) 0%, rgba(63,155,19,1) 100%, rgba(56,146,12,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(74,168,28,1) 0%,rgba(63,155,19,1) 100%,rgba(56,146,12,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(74,168,28,1) 0%,rgba(63,155,19,1) 100%,rgba(56,146,12,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4aa81c', endColorstr='#38920c',GradientType=0 );
}
.btn > span{  
 position:relative;
 z-index: 1; 
}
.btn:after {
    content: "";
    width: 35px;
    height: 35px;    
    display: block;
    position: absolute;
    top: 7px;
    right: -18px;
    border: 1px solid #4A803C;
    border-left: none;
    border-bottom: none;
    border-radius: 3px;
    -webkit-transform: rotate(47deg) skew(5deg);   
    transform: rotate(47deg) skew(5deg);
    background-image: -moz-linear-gradient( 143deg, rgb(74,168,28) 0%, rgb(63,155,19) 100%);
    background-image: -webkit-linear-gradient( 143deg, rgb(74,168,28) 0%, rgb(63,155,19) 100%);
    background-image: -ms-linear-gradient( 143deg, rgb(74,168,28) 0%, rgb(63,155,19) 100%);
    background-image: linear-gradient( 143deg, rgb(74,168,28) 0%, rgb(63,155,19) 100%);
}

.btn:hover{
  background: rgb(56,146,12); /* Old browsers */
background: -moz-linear-gradient(top, rgba(56,146,12,1) 0%, rgba(63,155,19,1) 0%, rgba(74,168,28,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(56,146,12,1) 0%,rgba(63,155,19,1) 0%,rgba(74,168,28,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(56,146,12,1) 0%,rgba(63,155,19,1) 0%,rgba(74,168,28,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#38920c', endColorstr='#4aa81c',GradientType=0 );
}
.btn:hover:after{
  background-image: -moz-linear-gradient( -47deg, rgb(74,168,28) 0%, rgb(63,155,19) 100%);
  background-image: -webkit-linear-gradient( -47deg, rgb(74,168,28) 0%, rgb(63,155,19) 100%);
  background-image: -ms-linear-gradient( -47deg, rgb(74,168,28) 0%, rgb(63,155,19) 100%);
  background-image: linear-gradient( -47deg, rgb(74,168,28) 0%, rgb(63,155,19) 100%);
}

＆＃13;

<a href="#" class="btn">
<span>Умножитель матрицы</span>
</a>

＆＃13;

我会很高兴得到任何帮助。谢谢

Answer 1

一个简单的解决方案是向.btn:after元素添加* { box-sizing: border-box; } .btn { display: inline-block; padding: 16px 30px; color: #fff; border: 1px solid #4A803C; position: relative; border-radius: 3px; background: rgb(74, 168, 28); background: linear-gradient(to bottom, rgba(74, 168, 28, 1) 0%, rgba(63, 155, 19, 1) 100%, rgba(56, 146, 12, 1) 100%); } .btn > span { position: relative; z-index: 1; } .btn:after { content: ""; width: 35px; height: 35px; display: block; position: absolute; top: 7px; right: -18px; border: 1px solid #4A803C; border-left: none; border-bottom: none; border-radius: 3px; transform: rotateY(45deg) rotate(47deg) skew(5deg); background-image: linear-gradient(143deg, rgb(74, 168, 28) 0%, rgb(63, 155, 19) 100%); } .btn:hover { background: rgb(56, 146, 12); background: linear-gradient(to bottom, rgba(56, 146, 12, 1) 0%, rgba(63, 155, 19, 1) 0%, rgba(74, 168, 28, 1) 100%); } .btn:hover:after { background-image: linear-gradient(-47deg, rgb(74, 168, 28) 0%, rgb(63, 155, 19) 100%); }。这将使元素的Y轴旋转，从而使其看起来比实际更窄。

可根据需要修改旋转角度。它可以是低于90度的任何值，具体取决于箭头的宽度或宽度。值越高，箭头就越窄。

<a href="#" class="btn">
  <span>Умножитель матрицы</span>
</a>

pObjTicketId.stream()
                .map(m-> m.get("requestId"))
                .map(reqId ->
                        Optional.ofNullable(storeManagerDao.getTicketDetailsWithTicketId(reqId))
                        .filter(l->!l.isEmpty())
                        .map(l->l.get(0))
                        .map(ticketDetails->
                                storeManagerDao.getMcouponData(ticketDetails.getDesiredDiscount(),
                                        ticketDetails.getSubdeptTicket().getSubDeptId())
                        )
                        .filter(Objects::nonNull)
                        .filter(l->!l.isEmpty())
                        .map(l->l.get(0))
                        .map(couponDo-> {
                            HeaderVO headerVO = new HeaderVO();
                            headerVO.setHeader(couponDo.getHeader());
                            headerVO.setRequestId(oreqId);
                            return headerVO;
                        })
                )
                .filter(Optional::isPresent)
                .map(Optional::get)
                .collect(Collectors.toList());

如何制作一个钝角的按钮？

1 个答案: