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

<!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. 浅析selenium的page object模式

    selenium目前比较流行的设计模式就是page object,那么到底什么是page object呢,简单来说,就是把页面作为对象,在使用中传递页面对象,来使用页面对象中相应的成员或者方法,能更好 ...

  2. 从BUG工具redmine上获取数据后借助python模块pycha 画出BUG分析类报表

    整体代码比较冗长,但是很好读.写的方法全是按照BUG分类去写的.所以写死了,凑合看吧,画出饼图,树状图和生成对应的数据excel,希望大家举一反三能帮助自己分析BUG #__author__ = 'x ...

  3. codeforces 487B B. Strip(RMQ+二分+dp)

    题目链接: B. Strip time limit per test 1 second memory limit per test 256 megabytes input standard input ...

  4. C/C++学习----使用C语言代替cmd命令、cmd命令大全

    [开发环境] 物理机版本:Win 7 旗舰版(64位) IDE版本:Visual Studio 2013简体中文旗舰版(cn_visual_studio_ultimate_2013_with_upda ...

  5. Android系列之UI组件----Menu菜单

    [声明] 欢迎转载,但请保留文章原始出处→_→ 生命壹号:http://www.cnblogs.com/smyhvae/ 文章来源:http://www.cnblogs.com/smyhvae/p/4 ...

  6. 三维世界的Gizmos

    Unity和Maya 今天在美术同事那儿了解些Maya常识,加上自己在Unity3D中的一点儿小操作,记录一下Gizmos 之前就知道Maya和Unity3D的轴向是一致的,在同事那儿看他操作Maya ...

  7. 使用Unity开发Android的几种调试方法

    前言 本文举例几种Android 调试的方法(PS:我是通过unity引擎来开发安卓游戏) Eclipse + adt 查看LOG 1.为Eclipse 装上adt 插件 2.打开Eclipse 的L ...

  8. Redis集群环境的部署记录

    Redis Cluster终于出了Stable,这让人很是激动,等Stable很久了,所以还是先玩玩. 一. 集群简单概念. Redis 集群是一个可以在多个 Redis 节点之间进行数据共享的设施( ...

  9. 七、Block 封装代码

    1.概念:封装代码块,调用的时候使用 2.声明 返回类型(^名字)(参数1,参数2..) = (参数类型 变量1,参数类型, 变量2){ }; int (^Sum)(int,int)  = ^(int ...

  10. NOI 1.7编程基础之字符串(35题)

    01:统计数字字符个数 查看 提交 统计 提问 总时间限制:  1000ms 内存限制:  65536kB 描述 输入一行字符,统计出其中数字字符的个数. 输入 一行字符串,总长度不超过255. 输出 ...