带三角形的边框

大家可直接复制粘贴，利用css3的一些新属性，即可实现气泡的对话框

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        .tag
        {
            width: 300px;
            height: 100px;
            border: 5px solid #09F;
            position: relative;
        }
        .tag em
        {
            display: block;
            border-width: 20px;
            position: absolute;
            bottom: -40px;
            left: 100px;
            border-style: solid dashed dashed;
            border-color: #09F transparent transparent;
            font-size: 0;
            line-height: 0;
        }
        .tag span
        {
            display: block;
            border-width: 20px;
            position: absolute;
            bottom: -33px;
            left: 100px;
            border-style: solid dashed dashed;
            border-color: #FFF transparent transparent;
            font-size: 0;
            line-height: 0;
        }
    </style>
</head>
<body>
    <div class="tag">
        <em></em>CSS气泡框实现
    </div>
    <div class="tag" style="margin-top: 100px">
        <em></em><span></span>CSS气泡框实现
    </div>
</body>
</html>

时间： 2024-10-02 06:05:43

带三角形的边框的相关文章

css简单实现带箭头的边框

原文地址 https://tianshengjie.cn/artic... css简单实现带箭头的边框 普通边框 <style> .border { width: 100px; height: 50px; border: 1px solid red; } </style> <div class="border"></div> 实现由四个三角形组成的正方形 <style> .triangle { width: 0; height

自己定义带三角形箭头的TextView

<?xml version="1.0" encoding="utf-8"? > <resources> <declare-styleable name="ArrowTextView"> <attr name="radius" format="dimension" /> <attr name="arrowWidth" format=&q

自定义带三角形箭头的TextView

<?xml version="1.0" encoding="utf-8"?> <resources> <declare-styleable name="ArrowTextView"> <attr name="radius" format="dimension" /> <attr name="arrowWidth" format=&qu

去掉UISearchBar自带的的边框背景

去掉UISearchBar自带的的边框背景 ,分为ios7后和ios7前的解决方案,代码如下: UISearchBar* searchbar = [[UISearchBar alloc]initWithFrame:CGRectMake(5, 0, 310, 50)]; searchbar.tag = 1000; searchbar.delegate = self; [cell addSubview:searchbar]; for (UIView *view in searchbar.subvie

【控件扩展】带圆角、边框、渐变的panel

下载地址:  http://files.cnblogs.com/chengulv/custompanel_demo.zip using System; namespace LC.Fun { /// <summary>Panel扩展 带圆角,颜色渐变</summary> [System.Drawing.ToolboxBitmapAttribute(typeof(System.Windows.Forms.Panel))] public class RoundPanel : System

带感”的边框交互动画效果

  效果的原理其实就是"四条边"发生宽度和高度的变化,上下两边是宽度变化,左右两边是高度的变化: 它们发生变化的方向也可以可控的,根据坐标设置即可控制. 下面我们直接上代码: 首先准备基础代码,那四条边并不是真正的border,而是通过标签加以宽高写出来,然后定位到四个方向: <!-- html --> <div class="box"> <div class="topL"></div> <d

如何给布局套上带颜色的边框

写一个selector <?xml version="1.0" encoding="utf-8"?> <layer-list xmlns:android="http://schemas.android.com/apk/res/android">     <item>         <shape>             <stroke android:width="2px"

聊天气泡的绘制（圆角矩形+三角形+黑色边框，关键学会QPainter的draw函数就行了），注意每个QLabel都有自己的独立坐标

头文件: #ifndef GLABEL_H #define GLABEL_H #include <QLabel> #include <QPainter> #include <QPaintEvent> #include <QMouseEvent> class GLabel : public QLabel { Q_OBJECT public: enum PEOPLE{She,Me}; Q_PROPERTY(QString str_context READ get

QT模态对话框用法（在UI文件中设置Widget背景图，这个图是一个带阴影边框的图片——酷）

QT弹出模态对话框做法: 1.新建UI文件时,一定要选择基类是QDialog的,我的选择是:Dialog without Buttons(),如下图: 2.然后在使用的时候: MyDialog dlg(this); dlg.exec(); 如果不加this,则会在任务管理器里面产生一个新的EXE. 3.如果对话框的标题是自定义,不想使用系统的标题,这时候需要在代码中加入: setWindowFlags(Qt::Dialog | Qt::FramelessWindowHint ); setAttr