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

<!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. 数据持久化之sqlite基本用法

    一.ACID 即原子性(Atomicity).一致性(Consistency).隔离性(Isolation).持久性(Durability). 原子性:整个事务中的所有操作,要么全部完成,要么全部不完 ...

  2. 【MVC 4】3.MVC 基本工具（创建示例项目、使用 Ninject）

    作者:[美]Adam Freeman      来源:<精通ASP.NET MVC 4> 本次将考察三类工具,它们是每一位 MVC 程序员工具库的成员:DI容器.单元测试框架和模仿工具. ...

  3. 【ASP.NET 插件】zyUpload的HTML5上传插件

    个人能力有限,只能网上找图片批量上传插件,看到一个还不错的插件zyUpload ,可以用来上传文件,但没有.NET 版本,特修改了下用以批量上传图片,效果图如下: update:2016年3月8日 有 ...

  4. Ajax读取文件时出现的缓存问题

    对于Ajax缓存问题时,由于浏览器的版本问题,有时候当服务器端已更改文件中的内容,而客户端并得不到更新后的文件,而是延续之前的文件内容,解决办法是:在读取的文件内容后加一串的地址:JSON的格式为[{ ...

  5. java 14 -10 Calendar类以及练习

    Calendar:它为特定瞬间与一组诸如 YEAR.MONTH.DAY_OF_MONTH.HOUR 等 日历字段之间的转换提供了一些方法, 并为操作日历字段(例如获得下星期的日期)提供了一些方法. 1 ...

  6. 验证码生成的c语言库

    http://www.open-open.com/lib/view/open1324534929968.html

  7. 关于eclipse入门开发c/c++文章推荐

    1. 关于编译说明. http://www.ibm.com/developerworks/cn/linux/opensource/os-ecc/ 2. 关于快捷键与代码阅读 http://www.cn ...

  8. throw跟throws关键字

    throws关键字 定义一个方法的时候可以使用throws关键字声明.使用throws关键字声明的方法表示此方法不处理异常,而交给方法调用处进行处理. throws关键字格式: public 返回值类 ...

  9. 利用exif.js解决ios手机上传竖拍照片旋转90度问题

    html5+canvas进行移动端手机照片上传时,发现ios手机上传竖拍照片会逆时针旋转90度,横拍照片无此问题:Android手机没这个问题. 因此解决这个问题的思路是:获取到照片拍摄的方向角,对非 ...

  10. PHP中的魔术变量

    PHP中的常量大部分都是不变的,但是有8个常量会随着他们所在代码位置的变化而变化,这8个常量被称为魔术常量. 名称 说明 __LINE__ 文件中的当前行号. __FILE__ 文件的完整路径和文件名 ...