Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

谈谈一些有趣的CSS题目(10)-- CSS 斜线的实现 #2

Open
chokcoco opened this issue Sep 23, 2016 · 21 comments

Comments

Projects
None yet
@chokcoco
Copy link
Owner

commented Sep 23, 2016

10、CSS 斜线的实现

如何使用单个标签,实现下图所示的斜线效果。

CSS slash

这种类似于表格的斜线效果,细细研究一下,还是有一些挺有趣的方法可以实现之。

我们假定我们的 HTML 结构如下:

<div></div>

假定高宽各为 100px,在单个标签局限内,看看能有多少种方法实现。

法一、CSS3 旋转缩放

这个应该属于看到需求第一眼就可以想到的方法了。

这里我们使用 伪元素 画出一条直线,然后绕 div 中心旋转 45deg ,再缩放一下就可以得到。

简单的一张流程图:

CSS3旋转缩放斜线

Demo戳我:CSS3旋转缩放斜线

法二、线性渐变实现

这种方法使用了背景的线性渐变实现,渐变背景很重要的一点是,虽然名字唤作渐变,但是也是可以画出实色而非渐变色

我们选定线性渐变的方向为 45deg,依次将渐变色值设为:transparent -> deeppink -> deeppink -> transparent

transparent 为透明色值。

就像这样简单的一句,即可实现斜线效果:

background:
    linear-gradient(45deg, transparent 49.5%, deeppink 49.5%, deeppink 50.5%, transparent 50.5%);

Demo戳我:CSS斜线(线性渐变实现)

法三、伪元素+三角形

接下来两种方法就有点为了斜线而斜线的感觉。

利用 CSS border ,是可以轻松实现一个类似这样的三角形的:

CSS border traingel

CSS 代码如下:

div{
  border:50px solid transparent;
  border-left:50px solid deeppink;
  border-bottom:50px solid deeppink;
}

这里,我们使用 div 的两个 伪元素 画出两个大小不一的三角形,然后通过叠加在一起的方式,实现一条斜线。

类似这样,配合 div 的白色底色,即可得到一条斜线:

CSS 斜线 gif

Demo戳我:CSS斜线(伪元素+三角形实现)

法四、clip-path

clip-path 是啥?可以算是 CSS3 的新增属性,或者准确来说是 SVG 的 的 CSS 版本。

使用 clip-path,我们可以定义任意想要的剪裁路径。

本文不深入探讨 clip-path ,可以先移步 MDN 或者其他关于 clip-path 讲解的文章学习一下。

使用 clip-path 的多边形规则 polygen,也可以轻松制作一个三角形(本题中,我们依然借助伪元素来使用clip-path):

CSS border traingel

CSS 代码如下:

div {
	width: 100px;
	height: 100px;
	-webkit-clip-path: polygon(0 0, 0 100px, 100px 100px, 0 0);
	background: deeppink;
}

可以看到 CSS 代码,主要 polygon(0 0, 0 100px, 100px 100px, 0 0) 中,其实是一系列路径坐标点,整个图形就是由这些点围起来的区域。

所以使用 clip-path 加上两个伪元素我们可以像 解法三 一样制作出斜线。

当然,我们也可以换一种方法,殊途同归,解法三也可以这样做,看看下面的效果图:

CSS-slash-gif2

Demo戳我:CSS斜线(clip-path)

@AntHp

This comment has been minimized.

Copy link

commented Oct 5, 2016

7、消失的边界线问题,我在《css设计指南》看到过,有一种巧妙的方法。
li+li{border-left: 1px solid #000;}

@chokcoco

This comment has been minimized.

Copy link
Owner Author

commented Oct 8, 2016

@AntHp
使用 li+li{} 好方法,只是这种应该是只适用于单行多列。

@fengcms

This comment has been minimized.

Copy link

commented Oct 9, 2016

在项目中有做到过这种两列布局的方法。当时是利用的display:table的方式去做的。

@chokcoco

This comment has been minimized.

Copy link
Owner Author

commented Oct 10, 2016

@fengcms
display:table 的方法适合单行多列,但是应该不适合多行多列吧。

@champkeh

This comment has been minimized.

Copy link

commented Oct 11, 2016

@AntHp
你说的方式对于单行的li,确实是非常巧妙。
多行的话,感觉还是使用margin:-1px巧妙一点,不过好像得套个div

@Serena211

This comment has been minimized.

Copy link

commented Oct 23, 2016

@chokcoco 多列等高布局也可以用pseudo 来实现, 可以看下我的代码http://jsfiddle.net/SerenaL/woomsmuf/28/

@chokcoco

This comment has been minimized.

Copy link
Owner Author

commented Oct 24, 2016

@Serena211
是的,好方法。
这题是还没完成的,伪元素的方式我也想过很多,在想如何阐述比较好。
因为有了 beforeafter 两个伪元素,相当于多了两个标签,这样解法就很丰富了。像你提供的这种解法,如果只用一个伪元素,再在单个伪元素上运用上线性渐变背景色,也可以达到目的。有的时候有了伪元素,反而选择困难了,算得上是一种幸福的烦恼。 😃

@gitFuns

This comment has been minimized.

Copy link

commented Nov 11, 2016

@chokcoco https://css.w3ctech.com/ 这个会过去吗

@chokcoco

This comment has been minimized.

Copy link
Owner Author

commented Nov 11, 2016

@gitFuns
今年在广州,刚好团队有票,应该会去。

@gitFuns

This comment has been minimized.

Copy link

commented Nov 11, 2016

@chokcoco

我也买票了 你们组团去啊 我就一个人去 到时想你请教下

@SakrA-T

This comment has been minimized.

Copy link

commented Dec 2, 2016

2345 20161202134717
2345 20161202134727
想问一下,第10题,第四种方法,为什么会在合并后变成黑白色,chorme下

@chokcoco

This comment has been minimized.

Copy link
Owner Author

commented Jan 7, 2017

@SakrA-T
有 Demo 吗,得看看代码才知道。。

@iisbigfish

This comment has been minimized.

Copy link

commented Apr 18, 2017

接收点击事件也可以用:focus啊。

@salamander-mh

This comment has been minimized.

Copy link

commented Jun 29, 2017

归纳的蛮好的

@jokum

This comment has been minimized.

Copy link

commented Aug 30, 2017

纯CSS的导航栏Tab切换方案 有没有办法做到默认显示内容1,而不需要点击才显示

@chokcoco

This comment has been minimized.

Copy link
Owner Author

commented Aug 30, 2017

@jokum
之前做的时候,法二:<input type="radio"> && <label for=""> 就已经是可以实现的到默认显示内容1,而不需要点击才显示的。
刚刚我看了下法一,初始时添加一个 active 类,也可以实现了。
可以看这里:

@jokum

This comment has been minimized.

Copy link

commented Aug 30, 2017

@chokcoco
感谢提供,受教了

@Luotianyi1205

This comment has been minimized.

Copy link

commented Jan 2, 2018

真的很好

@adminparry

This comment has been minimized.

Copy link

commented Jun 3, 2018

话说你这动态图制作工具用的啥 可不可以分享一下

@fengma1992

This comment has been minimized.

Copy link

commented Aug 20, 2018

最后那个clip-path,直接在div上加个

-webkit-clip-path: polygon(1px 0, 100px 99px, 99px 100px, -1px 0);

就可以了吧,相当于直接加了一个平行四边形的path

https://codepen.io/fengma1992/pen/eLYOxP

@earlymeme earlymeme referenced this issue Nov 20, 2018

Closed

书签 #13

@chokcoco chokcoco changed the title 谈谈一些有趣的CSS题目(6~10) 谈谈一些有趣的CSS题目(10)-- CSS 斜线的实现 Mar 18, 2019

@nonoroazoro

This comment has been minimized.

Copy link

commented Apr 4, 2019

人才啊!!!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.