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

<!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. hdu-5895 Mathematician QSC(数学)

    题目链接: Mathematician QSC Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 131072/131072 K (Jav ...

  2. 解决linux部署项目后，第一次访问初始化数据源的时候很慢的问题

    先说一下场景 测试环境是linux - centos6.5,项目是分布式的,分别搭建到linux上 数据货使用的是阿里巴巴数据源 每次重启后的第一次访问会比较慢,查看日志发现 卡在这个地方 ...{d ...

  3. Redis 一二事 - 在spring中使用jedis 连接调试单机redis以及集群redis

    Redis真是好,其中的键值用起来真心强大啊有木有, 之前的文章讲过搭建了redis集群 那么咋们该如何调用单机版的redis以及集群版的redis来使用缓存服务呢? 先讲讲单机版的,单机版redis ...

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

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

  5. 测试杂感：Bug Bash

    缺陷大扫除(Bug Bash)是一项短期的全员测试活动.在微软,许多开发团队会在里程碑(milestone)的末期执行缺陷大扫除.程序员.测试员.程序经理.内部用户.市场人员在1~3天的时间窗口中,运 ...

  6. java 16-1 ArrayList的练习1

    需求: ArrayList去除集合中字符串的重复值(去掉相同的字符串) 分析: 第一种做法:创建一个新的空集合: A:创建1个具有相同字符串的集合 B:创建1个空的集合 C:遍历第一个集合里面的元素 ...

  7. 基于PXC的MySQL高可用环境简单部署

    PXC简介 Percona XtraDB Cluster(简称PXC集群)提供了MySQL高可用的一种实现方法. 1.集群是有节点组成的,推荐配置至少3个节点,但是也可以运行在2个节点上. 2.每个节 ...

  8. iOS math.h数学函数

    在实际工作中有些程序不可避免的需要使用数学函数进行计算,比如地图程序的地理坐标到地图坐标的变换.Objective-C做为ANSI C的扩展,使用C标准库头文件<math.h>中定义的数学 ...

  9. Datagrid数据导出到excel文件的三种方法

    原文连接: http://www.cnblogs.com/xieduo/articles/606202.html 一.文件保存在服务器,提供下载 方法一:导出到csv文件,存放在服务器端任一路径,然后 ...

  10. C++ 排序函数 sort(),qsort()的用法

    转自:http://blog.csdn.net/zzzmmmkkk/article/details/4266888/ 所以自己总结了一下,首先看sort函数见下表: 函数名 功能描述 sort 对给定 ...