利用border 产生尖角

<!DOCType html>
<html>
<head>
<meta charset="utf8" />
<style type="text/css">
    .tip {
        position:relative;
        margin-left:4px;
        background-color:#ff4500;
        padding-left:5px;
        height:18px;
        line-height:18px;
        font-size:12px;
        color:#fff;
    }
    .tip .arrow{
        border-top:4px solid #fff;
        border-bottom:4px solid #fff;
        border-right:4px solid #ff4500;
        line-height:0px;
        position:absolute;
        left:-4px;
        top:5px;
    }
    
</style>
</head>
<body>
    <div class="tip">
        <div class="arrow"></div>
        <label>这是个提示</label>
    </div>
</body>
</html>

效果：

时间： 2024-08-01 17:27:35

利用border 产生尖角的相关文章

border尖角（转国外文章http://www.howtocreate.co.uk/tutorials/css/slopes）

Using borders to produce angled shapes This is a suppliment to the tutorial, and is here only for illustrative purposes. It is not part of the main tutorial. These examples will not work in Netscape 4 or WebTV, because they do not allow you to define

百度前端笔试题目--css 实现一个带尖角的正方形

今天在牛客网上看到这道题,发现自己并不会,看来自己css都没怎么学习,也不怎么会用.看了下答案,不是很明白,也在网上搜集了一些资料和解法,感觉一些同学博客上也写了一些解法和拓展,所以就在这里借鉴一下咯.(参考地址:http://www.ithao123.cn/content-5672159.html) 实现图示的效果涉及到的知识主要有两点:一个是before.after伪元素,一个是border 1.before 和 after 都是css中的伪元素,通过给定一个属性content给元素添加新的

(转载) css实现小三角（尖角）

在各种网站里面,我们会经常看到类似于这样的尖角:(示例:新浪微博) 它实现的方式有多种,哪种才是最简单的?哪种才是最优秀的?首先我声明一下,我还不清楚这个东西具体叫什么名字(哪位知道还望告知),暂且叫尖角吧,通俗易懂.我查看了各大互联网公司的网站,包括腾讯.百度.新浪.天猫.去哪网, 腾讯: 百度: 去哪网: 天猫: 其中,百度和腾讯直接用的背景图片,简单粗暴,没有艺术细菌. 优点:形状随意: 缺点:不方便维护: 下面要说的是新浪微博,右键小尖角,查看元素,可以看到一段代码: <div clas

CSS3之尖角标签

如图所示,Tag标签的制作通常使用背景图片,现在用CSS3代码就能实现尖角效果(需浏览器支持CSS3属性). 运用CSS3样式实现尖角标签,只需要写简单的HTML结构和CSS样式. <p> <a>Tag1</a> <a>Tag2</a> <a>Tag3</a> <a>Tag4</a> </p> css主要利用伪元素来实现尖角 a{ dispaly:inline-block; positi

html如何绘制带尖角（三角）的矩形

摘要:网上有很多html+css制作带三角的矩形的方法,我在这里列举其中一种,兼容bootstrap3.我们先来看一个三角在左边的对话框的效果图矩形就不必说了,矩形的border-radius也不用说了,圆角可以自己设置,可以直接用bootstrap中的类.下面说下矩形左边的小三角,我们可以这么设置.右边的矩形我们标记为类log-content,左边的小三角我定义为类triangle,在html中的代码是这样:<divclass="log-content" 网上有很多html+c

css细节决定薪水一：尖角处理

在各种网站里面,我们会经常看到类似于这样的尖角:(示例:新浪微博) 它实现的方式有多种,哪种才是最简单的?哪种才是最优秀的?首先我声明一下,我还不清楚这个东西具体叫什么名字(哪位知道还望告知),暂且叫尖角吧,通俗易懂.我查看了各大互联网公司的网站,包括腾讯.百度.新浪.天猫.去哪网, 腾讯: 百度: 去哪网: 天猫: 其中,百度和腾讯直接用的背景图片,简单粗暴,没有艺术细菌. 优点:形状随意: 缺点:不方便维护: 下面要说的是新浪微博,右键小尖角,查看元素,可以看到一段代码: <div clas

带尖角的div

原以为尖角三角形是png图片,原来是可以用css画出来,css3也可以很简单的得到带圆角的div, 大概思路: 1.画出一个带细边框的div 2.使用::before和left:100%在div的右边添加一个height和width为0但是带边框的元素 3.使用::after覆盖before #demo { width: 100px; height: 100px; background-color: #fff; border: 2px rgb(31, 197, 86) solid; border

Android 实现气泡布局/弹窗，可控制气泡尖角方向及偏移量

Android 自定义布局实现气泡弹窗,可控制气泡尖角方向及偏移量. 效果图 实现 首先自定义一个气泡布局. /** * 气泡布局 */ public class BubbleRelativeLayout extends RelativeLayout { /** * 气泡尖角方向 */ public enum BubbleLegOrientation { TOP, LEFT, RIGHT, BOTTOM, NONE } public static int PADDING = 30; public

css 利用border 绘制三角形. triangle

1.基础三角形. 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>全局css以及辅助css</title> 6 <style type="text/css"> 7 8 9 10 /***1: 初始样式设置*******/ 11 html, body, u