听说是百度校招的题目，就写了一下

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>无标题文档</title>

</head>

<style>

*{

    margin:0;

    padding:0;

}

.tri_parent{

    position:relative;

    width:200px;

    height:200px;

    margin:40px;

    padding:10px;

    background:#09C;

}

.tri_parent .tri_content{

    width:100%;

    height:100%;

    background:#FFF;

}

.tri_parent .tri{

    position:absolute;

    top:0;

    right:-8px;

    color:#09C;

}

</style>

<body>

<div class="tri_parent">

    <div class="tri_content">

        使用字符串实现三角形

       </div>

    <div class="tri">◆</div>

</div>

<style>

.tri_parent_css{

    margin:40px;

    position:relative;

    width:200px;

    height:200px;

    padding:10px;

    background:#09C;

}

.tri_parent_css .tri{

    position:absolute;

    width:0;

    height:0;

    right:-20px;

    top:10px;

    border:10px solid transparent;

    border-left:10px solid #09C;

}

</style>

<div class="tri_parent_css">

        使用CSS实现三角形
　　　　　注意的是三角形的right是三角形的border的width度

    <div class="tri">

    </div>

</div>

</body>

</html>

CSS和字符串实现三角形的更多相关文章

  1. HTML: 用CSS畫一個三角形

    代碼如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w ...

  2. 用 CSS 实现字符串截断

    [要求]:如何用css实现字符串截断,超出约定长度后用缩略符...代替?   ♪ 答: <html> <head> <meta charset="UTF-8&q ...

  3. 用CSS截断字符串的两种实用方法

    方法一: 复制代码 代码如下: <div style="width:300px; overflow:hidden; text-overflow:ellipsis; white-spac ...

  4. 用CSS截断字符串

    方法一: <div style="width:300px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;&q ...

  5. css中border画三角形

    <!doctype html><html lang="en"> <head>  <meta charset="UTF-8&quo ...

  6. 用css做出来一个三角形

    用css做出来一个三角形      <!--不设置宽高  转换行内块  边线设置成宽度-->       <div class="triangle"> 三角 ...

  7. 通过CSS的border绘制三角形

    通过css的border 可以绘制出三角形, 不同的样式组合,有着不同的效果,可以控制它的大小,颜色,方向.看下面各种图形,相信可能还有很多图形,大家都没见过. 先写出公共的样式: .border { ...

  8. 用CSS绘制箭头等三角形图案 [译]

    最近重新设计了我的网站,准备添加tooltips提示信息效果.实现很容易,但我想要让提示功能具有三角形的指示图标.当我重新思考想要所设计的每个图标颜色都随心所欲的时候,采用图片那就是一场灾难.幸运的是 ...

  9. CSS用border绘制三角形

    使用border绘制三角形的思路,就是border尺寸设置一个较大的值,元素自身的宽高设置为0,全部由边线占据,这样每边就会显示为四分之一块的三角形.这样不借助图片,可以直接绘制出三角形了. 一个栗子 ...

随机推荐

  1. 分享一个Fluent风格的邮件发送封装类

    C#中用SmtpClient发邮件很简单,闲着无事,简单封装一下 IEmailFactory public interface IEmailFactory { IEmailFactory SetHos ...

  2. codeforces 711B B. Chris and Magic Square(水题)

    题目链接: B. Chris and Magic Square 题意: 问在那个空位子填哪个数可以使行列对角线的和相等,就先找一行或者一列算出那个数,再验证是否可行就好; AC代码: #include ...

  3. java8-3 多态的好处和弊端以及多态的理解

    多态的好处: A:提高了代码的维护性(继承保证) B:提高了代码的扩展性(由多态保证) 猫狗案例代码 class Animal { public void eat(){ System.out.prin ...

  4. VC2010中去掉红绝下划线

    1. 在VC2010 的tools/中找到editior. 已经找到c/c++->advanced->IntelliSense->Disable IntelliSence->T ...

  5. ssh scp 复制文件和文件夹

    三,复制文件或目录命令:  复制文件:  (1)将本地文件拷贝到远程  scp 文件名用户名@计算机IP或者计算机名称:远程路径 本地192.168.1.8客户端  scp /root/install ...

  6. html的解析

    Web页面运行在各种各样的浏览器当中,浏览器载入.渲染页面的速度直接影响着用户体验 简单地说,页面渲染就是浏览器将html代码根据CSS定义的规则显示在浏览器窗口中的这个过程.先来大致了解一下浏览器都 ...

  7. 【MySQL】Linux MySQL学习记录

    1.查看日志存放路径 show variables like 'general_log_file'; 2.查看日志是否开启 show global variables like 'log_bin%'; ...

  8. Java开源GIS系统

     uDig  基于Eclipse RCP的uDig开源项目既是一个GeoSpatial应用程序也是一个平台开发者可通过这个平台来创建新的在uDig基础上衍生的应用程序,uDig是Web地理信息系统的一 ...

  9. StringBuffer类 和 StringBuilder类

    上一篇中讲解了String类的用法.那么String有什么特点呢? 字符串特点:字符串是常量,其值在创建后就不能被修改.字符串的内容一旦发生变化,就会创建一个新的对象. 代码验证字符串特点: publ ...

  10. jquery 删除字符串最后一个字符的方法

    字符串:var s = "1,2,3,4,5," 目标:删除最后一个 "," 方法: s=s.substring(0,s.Length-1): 字符串:var ...