CSS中border实现三角效果 - Thinking80s - ITeye博客

`

deng131

浏览: 675191 次
性别:
来自: 深圳

最近访客更多访客>>

CalvinLu

zhangcaiyanbeyond

RedBlood

zhangbohun

博主相关

博客

微博

相册

收藏

留言

关于我

文章分类

社区版块

存档分类

最新评论

zhouyicang：为嘛人气不够，这么好的文章，我找了几十篇博客，才找到这篇解惑了 ...
HTML 块级元素/内联元素
young7：不错，解惑了
HTML 块级元素/内联元素
lvjin948：获取浏览器语言的完美方案。http://blog.csdn.n ...
JavaScript获取浏览器语言类型
tarena_hhh：我用了css优化工具，发现他的顺序有很大不一样？？？？？
CSS属性书写顺序及命名规则
deng131：谢谢你的提醒，是有个地方写错了
javascript事件绑定addEventListener,attachEvent

CSS中border实现三角效果

博客分类：

stylesheet

CSS WordPress Blog HTML

阅读更多

一直关注js比较多，对css不是很熟，作为前端开发工程师而言这是不平衡和不合格的。当面试时或者时同行问道如何实现这个效果时候就萌到了，虽然也在各个博客上看到过实现文章但是一直没有自己去实践和理解其实现原理。

<!DOCTYPE html>
<html>
<head>
<style>
.clip{
  border-style: solid dashed dashed;
  border-color: #red transparent transparent;
  border-width: 6px;
  width:0;
  height:0;
}
</style>
</head>
<body>
<div>
   <div class="clip"></div>
</div>
</body>
</html>

实现的原理很简单，之前各个技术博客上都有介绍，但是一直自己没有实践过，还是需要自己去实践，这个印象和理解起来才深刻。

参考：
http://www.zhangxinxu.com/wordpress/?p=651
http://www.zhangxinxu.com/wordpress/2010/05/css-border%E4%B8%89%E8%A7%92%E3%80%81%E5%9C%86%E8%A7%92%E5%9B%BE%E5%BD%A2%E7%94%9F%E6%88%90%E6%8A%80%E6%9C%AF%E7%AE%80%E4%BB%8B/

分享到：

CSS中border实现圆角效果 | 处理不支持JavaScript脚本情况

2011-05-27 21:52
浏览 1360
评论(0)
分类:Web前端
查看更多

评论

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

css border三角形: css border三角形

css实现三角形及应用示例: 本篇文章将深入探讨如何用CSS实现三角形，并通过实例展示其在实际应用中的效果。首先，我们要理解CSS创建三角形的基本原理。由于HTML元素默认是矩形，但我们可以通过设置元素的宽度和高度为0，同时设定不同的边框...

纯CSS实现多彩三角形有序变化特效动画时尚背景墙.zip: 不过，这个项目标签中提到的是纯CSS实现，所以没有使用JS。总结起来，创建这样一个纯CSS多彩三角形有序变化特效动画时尚背景墙，主要涉及以下技术点： 1. 利用边框创建三角形 2. 使用CSS渐变实现多彩效果 3. `@...

CSS 学习三角 border transparent 下拉框: 标题中的“CSS学习三角 border transparent 下拉框”是指在CSS样式设计中，如何利用边框(border)的透明属性创建三角形以及在下拉框(drop-down list)中应用这一技巧。在网页设计中，三角形通常用于指示箭头或方向，...

css实现三角形.zip: 这个“css实现三角形.zip”压缩包文件包含了如何利用CSS来创建不同方向的三角形的示例，这对于构建诸如下拉菜单、提示箭头等交互元素时非常有用。首先，我们要理解CSS是如何生成三角形的。由于CSS无法直接画出几何...

css 倒三角形 CSS 打造(此处有更多内容)的倒三角显示效果: /*如果想改变倒三角形的大小,就改变这里的像素值*/ border-style: solid; border-color: #666 #fff #fff #fff; /*如果倒三角形的父元素背景不是白色,就把后面三个#fff改为对应的背景色*/ top: 13px; left: 40px; /*...

css border实现Bubble提示框的方法: `CSS`（层叠样式表）是一种强大的工具，能够帮助我们实现这些视觉效果，而无需依赖JavaScript或者图片。本篇文章将详细探讨如何利用`CSS`的`border`属性来实现一个Bubble提示框，特别是通过创建两个三角形来形成箭头...

08.code css实现三角形.zip: 实现CSS三角形的核心技巧在于利用`border-radius`、`border-color`和`border-width`属性。以下是一个基本的实现步骤： 1. 创建一个HTML元素，例如`<div>`，并给它一个固定的高度和宽度，通常设为0。 2. 设置元素的`...

详解CSS3 用border写空心三角箭头 (两种写法): 在CSS3中，创建空心三角箭头是一个实用的技巧，尤其在构建用户界面或布局时。本篇文章将详细介绍如何利用border属性来实现这一效果，包括两种不同的方法。 ### 第一种写法：利用伪元素 `::before` 或 `::after` 在...

用css写出三角形: 在CSS世界中，创造出各种形状是一项基本技能，而“用CSS写出三角形”是一个常见的需求，尤其是在构建下拉菜单、提示框或者箭头效果时。本文将深入探讨如何利用CSS来绘制三角形，并通过实际的代码示例进行解析。 ...

css小三角的做法与使用: 在网页设计中，CSS（层叠样式表）是一种强大的工具，可以用来定义页面元素的外观、布局和结构。其中，利用CSS实现小三角形是一种常见的技巧，尤其在创建箭头、提示框等元素时非常实用。这个“css小三角的做法与使用...

css 三角形样式: 在CSS世界中，三角形样式是一种常见的视觉效果，用于创建箭头、指示器或装饰元素。这个主题主要涉及如何利用CSS的基本属性和技巧来构造出看似复杂的几何形状，特别是三角形。下面我们将深入探讨CSS创建三角形的原理...

css实现带圆角三角型的示例代码: - triangle-right类用于创建向右的圆角三角形，通过设置伪元素的左侧边框宽度为0，上边和下边边框宽度大于右侧边框，以及对右上和右下角的圆角设置，实现效果。 - triangle-down类创建向下的圆角三角形，设置顶部...

CSS实现三角效果的简单实例: CSS三角效果的实现是前端开发中常见的一种视觉设计技巧，常用于下拉菜单的箭头、提示信息的标注等场景。下面将详细介绍两种使用CSS实现三角效果的简单方法。方法一：使用border属性和transform属性来实现三角形...

用css border实现尖三角的写法(无图片): 下面我们将详细讨论如何通过CSS border来实现尖三角形，并探讨其原理和拓展应用。首先，我们来看给出的示例代码： ```html <!DOCTYPE HTML> <style type="text/css"> *{margin:0;padding:0;} body{...

css3实现六角形效果 css3实现六角形网页特效.zip: 在现代网页设计中，利用CSS3的特性可以创建各种创新的视觉效果，其中之一就是构建六角形元素。这个“css3实现六角形效果 css3实现六角形网页特效.zip”压缩包文件提供了关于如何使用CSS3来创建六角形以及相关网页...

使用CSS实现小三角形效果【附实例】: 其中，使用CSS实现小三角形效果是一个常见的需求，它可以在网页中制作出整洁的视觉效果，比如下拉菜单的小箭头、提示信息的小尾巴等。在本篇内容中，将详细介绍如何利用CSS实现小三角形效果，并提供实例代码。首先...

CSS border三角、圆角图形生成技术详解: 纯粹的CSS2的内容，没有兼容性的问题，我之前在纯CSS实现各类气球泡泡对话框效果一文中算是比较详细的讲述了CSS border属性生成三角的原理，以及实例。我觉得此技术相当实用的，故本文再次简单叙述一下，另外，本文...

Global site tag (gtag.js) - Google Analytics