【clip-path】异形tab按钮的样式需求

html-css014

【clip-path】异形tab按钮的样式需求,第1张

1.之前都是用伪类写,特别麻烦;

2.也可以直接用背景图片,但是鼠标点击某些区域会出现点击错误,降低用户体验。

但是前不久赛博朋克2077发售之后想复写那个按钮样式,机缘巧合发现了一个新属性。

clip-path属性将所描绘区域外的部分进行裁切,使其未展示部分鼠标移入不会有效果【效果如下图:这里用cursor:wait属性方便展示】

缺点:添加border属性,扣除部分边框无法展示【建议配合ui切图使用】

PC端和移动端浏览器支持:如下图【图片来源网站: https://css-tricks.com/almanac/properties/c/clip-path/ 】

Tab菜单比较简单的方法是直接使用dreamweaver cs3的spry制作,其他方法制作难度比较大,不管哪种方法,必须要使用javascript调用。

<ul class="tabs">

<li>

<input type="radio" name="tabs" id="tab1" checked />

<label for="tab1">选项卡 1</label>

<div id="tab-content1" class="tab-content">

<p>选项卡内容 1</p>

</div>

</li>

<li>

<input type="radio" name="tabs" id="tab2" />

<label for="tab2">选项卡 2</label>

<div id="tab-content2" class="tab-content">

<p>选项卡内容 2</p>

</div>

</li>

</ul>

1.设置class或者id,加以区分

2.比如说上级菜单是div,如下:

<div>

<table></table>

<table></table>

</div>

那么,在css中第一个table可以用“div>table{ }“来写