css 绘制对话框三角符号

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Test</title>
    <style>
        .tip {
            position: relative;
            background-color: deepskyblue;
            margin: 20px auto;
            width: 246px;
            height: 43px;
            line-height: 43px;
            color: white;
            text-align: center;
            border-radius: 10px;
            font-family: sans-serif;
        }
        .tip:after {
            content: ‘‘;
            position: absolute;
            width: 0;
            height: 0;
            border: 8px solid;
        }
        .top:after {
            border-bottom-color: deepskyblue;
            left: 50%;
            bottom: 100%;
            margin-left: -15px;
        }
        .right:after {
            border-left-color: deepskyblue;
            left: 100%;
            top: 50%;
            margin-top: -7px;
        }
        .bottom:after {
            border-top-color: deepskyblue;
            top: 100%;
            left: 50%;
            margin-left: -15px;
        }
        .left:after {
            border-right-color: deepskyblue;
            top: 50%;
            right: 100%;
            margin-top: -9px;
        }
    </style>
</head>
<body>
    <div class="tip top">top</div>
    <div class="tip bottom">bottom</div>
    <div class="tip left">left</div>
    <div class="tip right">right</div>
</body>
</html>

时间： 2024-10-20 00:46:32

css 绘制对话框三角符号的相关文章

css绘制倒三角

1 <style> 2 i{ border-left: 5px solid transparent; 3 border-right: 5px solid transparent; 4 border-top: 5px solid #2794EF; 5 } 6 </style> 7 8 <i></i>

纯CSS绘制三角形

使用CSS绘制三角形正三角形的绘制: 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>正三角形</title> 6 <style type="text/css"> 7 #triangle-up { 8 width: 0; 9 height: 0; 10

今天在国外的网站上看到了很多看似简单却又非常强大的纯CSS绘制的图形,里面有最简单的矩形.圆形和三角形,也有各种常见的多边形,甚至是阴阳太极和网站小图标,真的非常强大,分享给大家. Square(正方形) #square { width: 100px; height: 100px; background: red;} Rectangle(矩形) #rectangle { width: 200px; height: 100px; background: red;} Circle(圆形) #circ

史上最强大的40多个纯CSS绘制的图形

今天在国外的网站上看到了很多看似简单却又非常强大的纯 CSS 绘制的图形,里面有最简单的矩形.圆形和三角形,也有各种常见的多边形,甚至是阴阳太极和网站小图标,真的非常强大,分享给大家. Square (正方形) #square { width: 100px; height: 100px; background: red; } Rectangle (矩形) #rectangle { width: 200px; height: 100px; background: red; } Circle (圆形

CSS实现带有三角小箭头的矩形效果

CSS实现带有三角小箭头的矩形效果:现在比较流行带有小箭头的矩形效果,比如鼠标放上去弹出的提示效果,还有微信类似的对话内容等,从视觉上较为美观,也比较人性化,如果是CSS3的话比较容易实现,但是当前还存在着很大的浏览器兼容性,下面介绍一种能够兼容所有的浏览器的代码.代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author&q

纯CSS制作的三角箭头

<!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>纯CSS制作的三角箭头丨kiddy<

css绘制三角形

今天看到人家用css画了一个三角形,简简单单几行代码,惊讶css其实还有很多我们不知道的东西. 三角形其实还是可以用在很多地方的.其实就那么几行代码直接贴上: div.arrow-up { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 50px solid #2f2f2f;

css绘制三角形原理

1.新建一个元素,将它的宽高都设置为0:然后通过设置border属性来实现三角形效果,下面是css绘制三角形的原理: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> .caret{ height:0;/*将宽高都设置为0*/ width:0; border:1

css制作小三角

视觉稿中经常有些小三角,如下图.每次用图片做太不方便了,我们看看用css实现的效果(支持ie6,7哦) <style> /*border实现三角*/ /*箭头向上*/ .arrow-top{ width : 0; height : 0; font-size : 0; line-height : 0; border-left: 5px dashed transparent; border-right: 5px dashed transparent; border-bottom: 5px soli