html - 按钮侧面的反向曲线

Question

所以我对一些“按钮选项卡”有以下设计。

一侧是 flex 的，因此边界半径实际上是不可能的。但这种曲线有可能吗？还是我注定要使用某种图像？

主要是寻找有关如何完成此任务的提示，或者我可以在某个地方寻找解决方案，因为我之前尝试寻找解决方案尚未产生结果。

HTML

<div class="tab-row">
    <button>All Products<div class="tab-row__counter">20</div></button>
    <button>Hardware<div class="tab-row__counter">20</div></button>
    <button>Virtual<div class="tab-row__counter">20</div></button>
    <button>Bundles<div class="tab-row__counter">20</div></button>
</div>

CSS

.tab-row{
    button{
        background-color:$element-bg;
        border:0;
        color:$white;
        width:300px;
        height:90px;
        margin-right:20px;
        margin-top:40px;
        border-radius: 5px 100px 0 0;

        &:first-child{
            margin-left:40px;
        }
        .tab-row__counter{

        }
    }
}

这就是我最终得到的结果， https://codepen.io/andrelange91/pen/YzPqJXO

不是完全 flex 但足够接近

Answer 1

您可以使用 border-radius、transform 和 transform-origin 属性来尝试曲线，例如，

/**
 * Slanted tabs with CSS 3D transforms
 * See http://lea.verou.me/2013/10/slanted-tabs-with-css-3d-transforms/
 */

body { padding: 50px;background:#20273d }

nav {
	position: relative;
	z-index: 1;
	white-space: nowrap;
}

nav a {
	position: relative;
	display: inline-block;
	padding: 1.5em 2em 1em 1em;
	color:#9a9a9a;
	text-decoration: none;
	margin: 0 -7px;
}



nav a::before {
	content: ''; /* To generate the box */
	position: absolute;
	top: 0; right: 0; bottom: .5em; left: 0;
	z-index: -1;
	border-radius: 10px 10px 0 0;
	background: #434f78;
	box-shadow: 0 2px hsla(0,0%,100%,.5) inset;
	transform: perspective(5px) rotateX(2deg);
	transform-origin: bottom left;
}


nav a.selected {
	z-index: 2;
  color:#FFF;
}

<nav class="left">
	<a href="#" class="selected">All Products</a>
	<a href="#">Hardware</a>
	<a href="#">Virtual</a>
</nav>

你也可以使用径向渐变，

body { padding: 50px;background:#20273d }

nav {
	position: relative;
	z-index: 1;
	white-space: nowrap;
}

nav a {
	position: relative;
	display: inline-block;
	padding: 1em 5em 1.2em 1em;
	color:#9a9a9a;
	text-decoration: none;
	margin: 0 -20px;
	border: 0px none;
}



nav a::before {
	content: ''; /* To generate the box */
	position: absolute;
	top: 0;
	right: 0;
	bottom: .5em;
	left: 0;
	z-index: -1;
	background: radial-gradient(circle at top right,transparent 5.8vw, #434f78 6.8vw);
	transform: perspective(10px) rotateX(1deg);
	transform-origin: bottom left;
	border: 0px none;
}


nav a.selected {
	z-index: 2;
  color:#FFF;
}

<nav class="left">
	<a href="#" class="selected">All Products</a>
	<a href="#">Hardware</a>
	<a href="#">Virtual</a>
</nav>