Question

我的应用程序中有基本的方形按钮：

我想设置这样的按钮集合：

我不知道你如何在每个酒吧的顶部获得角度。当前方形按钮CSS：

   .button {
      display: inline-block;
      text-align: center;
      line-height: 1;
      cursor: pointer;
      -webkit-appearance: none;
      transition: background-color 0.25s ease-out, color 0.25s ease-out;
      vertical-align: middle;
      border: 1px solid transparent;
      border-radius: 0;
      padding: 0.85em 1em;
      margin: 0 0 1rem 0;
      font-size: 0.9rem;
      background-color: #2199e8;
      color: #fefefe; }
      [data-whatinput='mouse'] .button {
        outline: 0; }

.button.tiny {
    font-size: 0.6rem; }

感谢任何指导。

Answer 1

您可以使用transparent borders [CSS Tricks]完成此操作。制作这种三角形设计的基础是：

.stack{
    float:left;
    margin-right: 2px;
}
.blank{
    width: 40px;
    height: 40px;
}
.block{
    width: 40px;
    height: 40px;
    background-color: blue;
}
.tri{
    width: 0px;
    height 0px;
    border-left: 20px solid transparent;
    border-top: 20px solid transparent;
    border-right: 20px solid blue;
    border-bottom: 20px solid blue;
}

<div class="stack">
    <div class="blank"></div>
    <div class="blank"></div>
    <div class="tri"></div>
</div>
<div class="stack">
    <div class="blank"></div>
    <div class="tri"></div>
    <div class="block"></div>
</div>
<div class="stack">
    <div class="tri"></div>
    <div class="block"></div>
    <div class="block"></div>
</div>

每个.stack会浮动，所有div都会留在display:block进行堆叠当您创建更多列时，您需要在上方添加更多.blank以及在.block以下添加列，以说明您的增加。您可以对我的代码进行的改进是考虑2px间距边距以及如何将斜率偏移为直线。

这并不是说它是这个设计的唯一解决方案，但它是我认为你可以从你开始学习并在你学到更多知识的基础上改进的。

玩得开心！

Answer 2

您可以将每个按钮定义为单个按钮，而不是将它们分成多个部分，只需将标签放在它们上面即可。

请注意，为了便于维护（和设置），此实现大量使用CSS变量。 IE，Microsoft Edge和Opera Mini（目前）不支持它们（caniuse大约2017年1月）。

此方法的一个缺点是难以获得背景的非纯色，因为您需要将所有边框指定为除了右边的透明。这应该可以通过SVG实现，但没有它就不可能实现简单的渐变。另一个是任何轮廓效果（outline，box-shadow等）都不会尊重＆＃34;梯形形状，而是围绕整个矩形绘制。

此外，从UX的角度来看，第一个按钮的可点击区域有点小。我将解决方法留给用户。

＆＃13;

.btnset{
    display:flex;
    justify-content:flex-start;
    align-items:flex-end;
    
    /*Button Sizing*/
    --height-per: 36px; /*how much the height grows by the position*/
    --width-per: 75px; /*width of each bar*/
    
    /*Label Positioning*/
    --bottom-prc: 0.45; /*Percentage of height to offset label*/
    --bottom-offset: 19px; /*flat modifier to offset*/
    --bottom-first-offset: 15px; /*offset for first button*/
    --left-prc: 0.45;  /*Percentage of width to offset label*/
    --left-offset: 0px; /*flat modifier to offset*/
    --left-first-offset: 9px; /*offset for first button*/
    
    /*Coloration and Font Sizing*/
    --bgc: #000;
    --font-color: #fff;
    --font-size: 12pt;
    
    /*Hover Effects*/
    --hover-grow: 15px;
    --hover-bgc: #333;
}

.btnset button{
    --btn-num: 1; /*used to scale the later buttons*/
    --heightmod: 0px; /*used for hover effect*/
    
    display:inline-block;
    position:relative;
    
    margin-right:1px;
    
    /*unset button defaults*/
    padding:0;
    width: 0;
    background:none;
    cursor:pointer;
    
    /*Creates the triangular top part*/
    border-style: solid;
    border-color: transparent var(--bgc) transparent transparent ;
    border-width: var(--height-per) var(--width-per) 0 0;
    
    /*Creates the vertical bar part*/
    height: calc(calc(var(--height-per) * var(--btn-num)) + var(--heightmod));
    
    /*Hover Effects*/
    margin-top:var(--hover-grow);/*placeholder for the hover growth*/
    transition:300ms ease all;
}
.btnset button div{
    display: block;
    position: absolute;
    
    color: var(--font-color);
    font-size: var(--font-size);
    
    /*Scales the button label's position based on the button's visible size*/
    bottom: calc(calc(calc(var(--height-per) * var(--btn-num)) * var(--bottom-prc)) - var(--bottom-offset));
    left: calc(calc(var(--width-per) * var(--left-prc)) + var(--left-offset));
}
.btnset button:hover{
    --heightmod:var(--hover-grow); 
    margin-top:0px; 
    border-right-color: var(--hover-bgc); 
}

/*Instances. First one has different label offsets, rest just need to know their number*/
.btnset button:nth-child(1){
    --btn-num: 1;
    --left-offset: var(--left-first-offset);
    --bottom-offset: var(--bottom-first-offset);
}
.btnset button:nth-child(2){ --btn-num: 2; }
.btnset button:nth-child(3){ --btn-num: 3; }
.btnset button:nth-child(4){ --btn-num: 4; }
.btnset button:nth-child(5){ --btn-num: 5; }
.btnset button:nth-child(6){ --btn-num: 6; }
.btnset button:nth-child(7){ --btn-num: 7; }
.btnset button:nth-child(8){ --btn-num: 8; }
.btnset button:nth-child(9){ --btn-num: 9; }

＆＃13;

<div class="btnset">
    <button onclick="alert(this.firstElementChild.innerHTML);"><div>1</div></button>
    <button onclick="alert(this.firstElementChild.innerHTML);"><div>2</div></button>
    <button onclick="alert(this.firstElementChild.innerHTML);"><div>3</div></button>
    <button onclick="alert(this.firstElementChild.innerHTML);"><div>4</div></button>
    <button onclick="alert(this.firstElementChild.innerHTML);"><div>5</div></button>
    <button onclick="alert(this.firstElementChild.innerHTML);"><div>6</div></button>
</div>

＆＃13;

或者，可以使用on dabblet

的早期版本

CSS：按钮上的角度

2 个答案: