CSS quiz 带边 border 的3角形

日期:2021-03-11 类型:科技新闻 

关键词:建站平台有哪些,如何建设网站,免费自助建站,如何建立一个网站,网站建站的

推的原文是:“CSS Quiz: 怎样无需照片、适配全部访问器完成这样的页面?夜里blog发布回答 twitpic.com/981xba”。大约必须完成下图的实际效果:


1、第1种方式
如 @zhiyelee 同学的计划方案所示,基本原理能够溶解为:

运用 border 来完成2个3角形
将3角形叠在1起,完成1个相近的实际效果。
这是1种非常好的计划方案。我如今小3角形的情况下,也喜爱用这类方式。

2、终极计划方案
CSS3 是常常被提到,但在桌面上端又非常少被用到的內容。像 Alice UI 中有许多适配处理计划方案别的全是运用 CSS3 来作高級访问器的完成的。今日这个计划方案应当也算是1种适配处理计划方案吧。后续再整到 Alice 中去。完成基本原理是这样的:

建立1个有 border 的4方形,用 CSS3 transfrom 作 45 度转动
运用 IE 的 matrix filter 完成 css3 transfrom 的适配计划方案
实际的实际效果能够看:Pure CSS Tips Angle。关键的完成编码能够自身 view source,这里贴出 CSS 编码:


拷贝编码
编码以下:

/* 适配处理计划方案:菱形 */
.diamond{
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.70775, M12=-0.70777, M21=0.70777, M22=0.70775, SizingMethod='auto expand')";
filter: progid:DXImageTransform.Microsoft.Matrix(
M11=0.70775,
M12=-0.70777,
M21=0.70777,
M22=0.70775,
SizingMethod='auto expand'
);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform:rotate(45deg);
}
:root .diamond{filter:none\9;}
/* Tips 组件 */
.tips{position:absolute;background: #fff8e8;border:1px solid #ffba00;padding:10px;}
.tips-angle{position:absolute;display:block;width:8px;height:8px;font-size:0;background:#fff8ef;border-left:1px solid #ffba00;border-top:1px solid #ffba00;top:⑸px;top:⑹px\9;left:10px;}