html中以菱形为边框,使用 border 画流程图中的决策框 (菱形框) 的代码教程

使用 border 画流程图中的决策框 (菱形框) 的代码教程

思路:

正常 p 设置宽高并加上边框后显示为一个长方形, 而菱形和长方形结构其实相似 (正方形也是一种特殊的菱形), 如果将 p 宽高设置为相等值, 旋转 45° 后就可以得到一个最简单的菱形.

显示效果:

代码如下:

但是如果在其内部添加文字, 文字会随 p 一同旋转

这样显示无法达到预期效果.

但是如果对其中文字做特殊处理可以达到类似效果,

代码如下:

这里将其中文字反向旋转, 使其回归水平, 不过若要使其能旋转, 一定要是块级元素.

(但是这种方法, 我现在不知道如何调整它的角度, 使其真正看着像个菱形. 以后我再尝试调整.)

下面进入今天的主要部分, 巧妙使用边框制作菱形决策框

效果图如下:

代码如下:

主要使用了 border 自身的特性, 两条相接的边平分角, 如图所示:

上图为一个 p 宽高都为 0 时, 设置 border 宽度后显示的效果, 通过将多余的边设置成和背景色相同, 那么使用两个三角拼接的方法就可以得到一个完美的菱形.

其中的文字时通过浮动, 调整到合适位置.

来源: https://www.2cto.com/kf/201806/757396.html