如何使CSS的一边是一个div的尖？ [英] How to make one side of a div pointy with CSS?

问题描述

我试图创建一个像这样的尖的按钮：

到目前为止，我只能实现：

img src =https://i.stack.imgur.com/fVbj7.pngalt =round button>

我想增加水平边框半径

$ b

 < a class =button>返回< / a> 
  

CSS

  .button {
 display：inline-block; 
 height：3em; 
 padding：0 0.7em 0 1.4em; 
 border：0.1em solid black; 
 border-radius：3em 0.4em 0.4em 3em / 1.5em 0.4em 0.4em 1.5em; 
 background：-moz-linear-gradient（
 top，
 #fff，
 #ccc 
）; 
} 
  

解决方案

这是一个更优雅的解决方案，允许更有效的样式和使用一个HTML元素。

$ b

 < a href =＃class =button>返回< / a> 
  

CSS

  a.button {
 text-decoration：none; 
 color：＃111; 
 text-shadow：0 1px 0 #fff; 
 font-weight：bold; 
 padding：10px 10px; 
 font-size：14px; 
 border-radius：0 8px 8px 0; 
 -webkit-border-radius：0 8px 8px 0; 
 float：left; 
 margin-left：30px; 
 margin-top：20px; 
 position：relative; 
 font-family：verdana; 
 color：＃3b3d3c; 
 border：1px solid＃666; 
 border-left：0; 
 background：-moz-linear-gradient（top，#eee 0％，＃bbb 100％）; 
 background：-webkit-linear-gradient（top，#eee 0％，＃bbb 100％）; 
} 
 a.button：after {
 content：; 
 width：25px; 
 height：25px; 
 background：-moz-linear-gradient（left top，#eee 0％，＃bbb 100％）; 
 background：-webkit-linear-gradient（left top，#eee 0％，＃bbb 100％）; 
 -moz-transform：rotate（45deg）; 
 -webkit-transform：rotate（45deg）; 
 display：block; 
 position：absolute; 
 top：5px; 
 left：-14px; 
 z-index：-1; 
 border：1px solid＃666; 
} 
 @media屏幕和（-webkit-min-device-pixel-ratio：0）{
 a.button：after {
 border-left：0; 
 left：-13px; 
} 
  

最后一条规则是Chrome，否则会使结果略有不同。 / p>

希望这有助于。

I'm trying to create a pointy button like this:

So far, I was only able to achieve this:

I thought increasing the horizontal border-radius would make it sharp, but all it does it make the roundness longer.

HTML

<a class="button">Back</a>

CSS

.button {
    display: inline-block;
    height: 3em;
    padding: 0 0.7em 0 1.4em;
    border: 0.1em solid black;
    border-radius: 3em 0.4em 0.4em 3em / 1.5em 0.4em 0.4em 1.5em;
    background: -moz-linear-gradient(
        top,
        #fff,
        #ccc
    );
}

解决方案

Having thought about it more, this is a more elegant solution that allows much more effective styling and the use of just one HTML element. Using this method, we can achieve the results in your concept completely.

HTML

<a href="#" class="button">Back</a>

CSS

a.button {
    text-decoration:none;
    color:#111;
    text-shadow:0 1px 0 #fff;
    font-weight:bold;
    padding:10px 10px;
    font-size:14px;
    border-radius:0 8px 8px 0;
    -webkit-border-radius:0 8px 8px 0;
    float:left;
    margin-left:30px;
    margin-top:20px;
    position:relative;
    font-family:verdana;
    color:#3b3d3c;
    border:1px solid #666;
    border-left:0;
    background: -moz-linear-gradient( top , #eee 0%,#bbb 100%);
    background: -webkit-linear-gradient( top , #eee 0%,#bbb 100%);  
}
a.button:after {
    content:"";
     width:25px;
     height:25px;
     background: -moz-linear-gradient( left top , #eee 0%,#bbb 100%);
     background: -webkit-linear-gradient( left top , #eee 0%,#bbb 100%);
     -moz-transform: rotate(45deg);
     -webkit-transform: rotate(45deg);
     display:block;
     position:absolute;
     top:5px;
     left:-14px;
     z-index:-1;
     border:1px solid  #666;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
a.button:after{
    border-left:0;
    left:-13px;
}

The last rule is for Chrome, which otherwise renders the result slightly differently.

Hope this helps.

这篇关于如何使CSS的一边是一个div的尖？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！