zoukankan      html  css  js  c++  java
  • css3实现三角形,聊天背景气泡,心形等形状

    1、聊天背景气泡:

    css代码如下:

    #talkbubble {width: 120px;margin:auto; background: red; position: relative; -moz-border-radius: 10px;-webkit-border-radius: 10px; border-radius: 10px; } 
    #talkbubble:before { content:""; position: absolute; right: 100%; top: 26px; width: 0; height: 0; border-top: 13px solid transparent; border-right: 26px solid red; border-bottom: 13px solid transparent; }

    2、心形: 

    css代码如下:

    #heart { position: relative;  100px; height: 90px; }
    #heart:before, #heart:after { position: absolute; content: ""; left: 50px; top: 0;  50px; height: 80px; background: red;-moz-border-radius: 50px 50px 0 0; border-radius: 50px 50px 0 0; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg);-ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-transform-origin: 0 100%; -moz-transform-origin: 0 100%; -ms-transform-origin: 0 100%; -o-transform-origin: 0 100%; transform-origin: 0 100%; } 
    #heart:after { left: 0; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg);<br> transform: rotate(45deg); -webkit-transform-origin: 100% 100%; -moz-transform-origin: 100% 100%; -ms-transform-origin: 100% 100%; -o-transform-origin: 100% 100%; transform-origin :100% 100%; } 
    

    3、正三角形:

    css代码如下:

    #triangle-up {  0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red; }
    

    4、倒三角形:

    css代码如下:

    #triangle-down {  0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-top: 100px solid red; }
    

      

  • 相关阅读:
    连接查询
    分组查询
    【转载】C语言 构建参数个数不固定函数
    【转载】vc编译exe的体积最小优化
    VC6微软正则表达式greta使用案例
    MultiByteToWideChar和WideCharToMultiByte
    【转载】VC操作剪切板
    VC/MFC分割字符串(SplitString)返回CStringArray
    【转载】实现UTF8与GB2312编码格式相互转换(VC)已经验证!
    VC6配置sqlite数据库
  • 原文地址:https://www.cnblogs.com/imsomnus/p/4350595.html
Copyright © 2011-2022 走看看