您现在的位置是：网站首页> 编程资料编程资料

CSS quiz 带边 border 的三角形详解CSS3 用border写 空心三角箭头 (两种写法)CSS中使用border来创建三角形的基本方法讲解CSS绘制三角形的实现代码(border法)

2021-08-29 2274人已围观

简介 在 twitter 上发了一条推，给一道 CSS 题给大家做。有几位同学给了回答，@zhiyelee 同学还给出了他的具体实现方案

推的原文是：“CSS Quiz: 如何不用图片、兼容所有浏览器实现这样的界面？晚上博客公布答案 twitpic.com/981xba”。大概需要实现下图的效果：

tips
一、第一种方法
如 @zhiyelee 同学的方案所示，原理可以分解为：

利用 border 来实现2个三角形
将三角形叠在一起，实现一个类似的效果。
这是一种不错的方案。我现在小三角形的时候，也喜欢用这种方法。

二、终极方案
CSS3 是经常被提起，但在桌面端又很少被用到的内容。像 Alice UI 中有很多兼容解决方案其他都是利用 CSS3 来作高级浏览器的实现的。今天这个方案应该也算是一种兼容解决方案吧。后续再整到 Alice 中去。实现原理是这样的：

创建一个有 border 的四方形，用 CSS3 transfrom 作 45 度旋转
利用 IE 的 matrix filter 实现 css3 transfrom 的兼容方案
具体的效果可以看：Pure CSS Tips Angle。主要的实现代码可以自己 view source，这里贴出 CSS 代码：


复制代码
代码如下:

/* 兼容解决方案：菱形 */
.diamond{
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.7071067811865475, M12=-0.7071067811865477, M21=0.7071067811865477, M22=0.7071067811865475, SizingMethod='auto expand')";
filter: progid:DXImageTransform.Microsoft.Matrix(
M11=0.7071067811865475,
M12=-0.7071067811865477,
M21=0.7071067811865477,
M22=0.7071067811865475,
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:-5px;top:-6px\9;left:10px;}

上一篇：Css绘制箭头实现代码详解CSS3 用border写 空心三角箭头 (两种写法)CSS怎么去掉select的下拉箭头样式 纯CSS绘制三角形箭头图案技术解析CSS制作箭头图标代码(圆，三角形，椭圆) CSS三角箭头应用实践仿新浪微博箭头的css写法纯CSS绘制三角形箭头效果纯CSS实现箭头、气泡让提示功能具有三角形图标CSS模拟小箭头的实现代码使用css实现任意大小、任意方向和任意角度的箭头示例

下一篇：css div 边框阴影利用背景图或内外层div实现层次感觉阴影效果基于CSS 属性实现按钮悬停边框和背景动画集合CSS 制作带边框背景色透明的消息框css3 边框、背景、文本效果的实现代码CSS3实现多背景模拟动态边框的效果CSS控制背景图像平铺实现边框阴影效果css样式div或li在ie6下背景平铺及border边框断线解决技巧 CSS新特性:圆角边框多栏Gird布局背景设置css背景和边框标签实例详解

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网