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

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

思路:

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

显示效果:

代码如下:

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

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

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

代码如下:

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

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

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

效果图如下:

代码如下:

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

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

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

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

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

在word中怎么把文字往下挪挪_word流程图中的文字怎样统一调整其大小字...
2016-07-16 21:02管爱娟客户经理在word中打开"绘图"工具栏. 一般word中都是默认"绘图"工具栏开启.如果开启了"绘图&quo ...
html中以菱形为边框,深入浅析css3 border-image边框图像详解
我的作风:首先给大家作自我介绍 hello,大家好,我叫小黑,也叫xiaoho,目前喜欢并从事写页面.因为不喜欢在那些类似BBS型的论坛上发帖,所以之前在 html-js 上发表几篇戳文,现在申请了前 ...
ie6中容器内浮动元素的border边框不完全显示的bug
ie6中容器内浮动元素的border边框不完全显示的bug html <div class="hrListBox"> <div class=&qu ...
html边框复合属性,详解CSS的border边框属性及其在CSS3中的新特性
基础你可能很熟悉边的最基本用法. CSS Code复制内容到剪贴板 border:1pxsolidblack; 上面的代码将给元素应用1px的边.即简洁又简单:但我们也可以稍作修改. CSS Code ...
html 让表格在右侧显示不出来,css中怎么解决表格边框不显示的问题？
css中怎么解决表格边框不显示的问题? html中的表格默认是不显示边框的,可以设置表格的border属性来添加边框,设置cellspacing属性为0来将边框合并,显示单一边框. css中也可以设置 ...
移动端采用Flexible将PX转换REM适配及开发中Retina屏1px边框的两种解决方案
移动端采用Flexible将PX转换REM适配及开发中Retina屏1px边框的两种解决方案说明:两个方案均基于Webpack构建. 方案一: 搭建环境及相关配置 webpack 3,需要loade ...
css中的背景、边框、补丁相关属性
css中的背景.边框.补丁相关属性关于背景涉及到背景颜色与背景图片背景颜色background-color即可设定: 背景图片background-image即可设定: 但是背景图片还涉及到其他的 ...
html 边框终点圆点,CSS设置虚线或虚边框dashed border
在网页前端设计过程中,少不了要使用边框,这样页面整体好看一些.边框通常分为两种,一种为实边框另一种为虚边框,实边框用得多一些,但有虚线或虚线边框点缀,网页会更漂亮,所以这两种边框都要使用. 在CSS中 ...
css3边框线border
边框(border) 在网页中我们最常见的一种css3样式莫过于边框圆角了,边框圆角是的网页整体更加美观,我们当然想要我们的页面更加的美观,所以我们一起来看看这个属性. border-radius: ...

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

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

最新文章

热门文章