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

<!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. NGUI 3.x 练习

    一.常用快捷键 Alt+Shitf+W 创建一个新的 Widget Alt+Shift+S 创建一个新的 Sprite Alt+Shift+L 创建一个新的 Label Alt+Shift+T 创建一 ...

  2. Javascript中call和apply的区别与详解

    在js中call和apply它们的作用都是将函数绑定到另外一个对象上去运行,两者仅在定义参数方式有所区别,下面我来给大家介绍一下call和apply用法: 在web前端开发过程中,我们经常需要改变th ...

  3. google的glog的用法：

    验证宏: 功能类似assert断言,但不受DEBUG模式控制即非DEBUG模式也生效 如果验证失败,会写FATAL日志并终止程序运行 CHECK(condition) 比较验证: CHECK_EQ(a ...

  4. [Elixir008]Nested Module里的动态函数调用方式

    有时我们需要动态生成一些模块名,然后调用它里面的函数.但是我们常常碰到的却是明明有那个模块,结果还是raise模块未定义... 我们来看看到底怎么回事? 首先我们定义一个函数 iex(1)> d ...

  5. Sql Server UniCode编码解码

    ); set @s = N'揶'; select UniCode(@s),nchar(UniCode(@s)); 在 SQL Server 中处理 Unicode 字串常数时,您必需在所有的 Unic ...

  6. 突然想起android与mfc差异

    两者都可以算作是客户端程序,都是做上位机用的.而且都是被动执行. 相同点: 1.MFC中,它是由 project的名字 里面的某个成员函数来初始化,窗体,以及窗体里面的变量. 后面都是监听消息循环.数 ...

  7. 如何在高并发分布式系统中生成全局唯一Id(转)

    http://www.cnblogs.com/heyuquan/p/global-guid-identity-maxId.html 又一个多月没冒泡了,其实最近学了些东西,但是没有安排时间整理成博文, ...

  8. BigDecimal 使用方法详解

    BigDecimal 使用方法详解 博客分类: java基础 bigdecimalmultiplyadddivide  BigDecimal 由任意精度的整数非标度值 和 32 位的整数标度 (sca ...

  9. 20135202闫佳歆--week 8 实验：理解进程调度时机跟踪分析进程调度与进程切换的过程--实验及总结

    week 8 实验:理解进程调度时机跟踪分析进程调度与进程切换的过程 1.环境搭建: rm menu -rf git clone https://github.com/megnning/menu.gi ...

  10. linux实践——简单程序破解

    一.运行login可执行程序,屏幕显示需要输入密码,随便输入一串字符,结果是Drop dead! 二.objdump -d login,对login进行反汇编,找到main函数,找到含有scanf的那 ...