前几天在w3cplus上看了关于css3的clip-path剪裁熟悉,当时就被这个东西吸引了,想到以前如果要做不规则图形,要么直接用图片,要么要用border加translate去制作三角形再拼起来。而且这些做法有很多问题,前者太耗资源要加图片,后者不仅麻烦而且制作出的图形的点击事件仍然会在整个矩形div中作用,无法让各种事件只在图形区域有效。
然而有了clip-path后就轻松简单多了。
最近切图的时候,美术师设计了一个带小尖尖的按钮......正好前几天看完那篇文章,这次就实践了一下,最后的效果图如下:
这是一个table布局,左边三个小div写死宽度,右边两个按钮根据内容自适应。那么来看看是如何实现的吧。代码如下:
demohtml,body{
font-size:50px;
}
*{
border:0;
padding: 0;
margin:0 ;
}
footer{
width:100%;
height: 1rem;
display: table;
}
.item1{
width:1rem;
height: 1rem;
display: table-cell;