今天在牛客网上看到这道题，发现自己并不会，看来自己css都没怎么学习，也不怎么会用。看了下答案，不是很明白，也在网上搜集了一些资料和解法，感觉一些同学博客上也写了一些解法和拓展，所以就在这里借鉴一下咯。（参考地址：http://www.ithao123.cn/content-5672159.html）

实现图示的效果涉及到的知识主要有两点：一个是before、after伪元素，一个是border

1、before 和 after 都是css中的伪元素，通过给定一个属性content给元素添加新的内容

before：用来在元素前插入新内容。

after：用来在元素后面插入新内容。

（1）before 给元素添加内容实例：

<p>我</p>

如果给这个p元素设置一个before：

p:before{ content:"爱你"; }

这个p就变成了：我爱你，content属性的值就添加到了p元素内容的前面。

（2）after 给元素添加内容实例：

<p>我</p>

p:after{   content:"20岁了"; }

这个p就会变成：我20岁了

2、利用伪元素设置css样式，如题目中的尖角，题目只给出一个div，只能弄出左边的带边框正方形，右边的尖角怎么来的呢？那就可以靠这个伪元素来完成了。

思路解析：

（1）先把正方形画出来

 #demo{

   width:100px;

   height:100px;

   background-color:#fff;

   border: 2px #000 solid;

   position: relative;

  }

（2）通过before或者after变出一个尖角出来。放到正方形右上角去。

1)首先，我们复习一下border属性。

  • border-width：

    thin（细边框） medium （中等边框）thick（细边框） 10px（像素值）只有当边框样式不是 none 时才起作用
  • border-style： 
    dotted （点状）solid（实线） double（双线） dashed（虚线）;
  • border-color：设置不同的颜色

2)boder实例：

  • 一个边长为20px的正方形，设置border为20px，可得效果：，html代码如下：
 <html>

     <head>

         <title></title>

         <style type="text/css">

         #demo{

                  width:20px;

                   height:20px;

                  background-color:#fff;

                   border: 20px #000 solid;

               }

         </style>

     </head>

     <body>

     <div id="demo">

     </div>

     </body>

 </html>
  • 我们可以根据border-left,border-right,border-top,border-bottom手动设置四个边框为不同颜色，css代码如下：
  •  #demo
    
 {
    
      width:20px;
    
       height:20px;
    
      background-color:#fff;
    
       border-left: 20px pink solid;
    
       border-right:20px red solid;
    
       border-top:20px green solid;
    
       border-bottom:20px blue solid;
    
  }
  • 将div宽度设置为0，则可见四个彩色小三角形。css代码修改如下： 
    #demo
    
{
    
     width:0px;
    
      height:0px;
    
     background-color:#fff;
    
      border-left: 20px pink solid;
    
      border-right:20px red solid;
    
      border-top:20px green solid;
    
      border-bottom:20px blue solid;
    
 }

    3）拓展思考，如果将三边边框透明，是不是就可以实现一个小三角形？

  • 如果只设置左边框，不设置其他三个边框。
  • #demo
    
{
    
    width:0px;
    
    height:0px;
    
    background-color:#fff;
    
    border-left: 20px pink solid;
    
    /*border-right:20px red solid;
    
    border-top:20px green solid;
    
    border-bottom:20px blue solid;*/
    
 }

    实验结果：页面空白。原因：因为如果只设置左边框，而这个div的高度又为0，那这个左边框是不会向上下两端扩展。

  • 只不设置左边框，其余三边均设置。 
    #demo
    
{
    
    width:0px;
    
    height:0px;
    
    background-color:#fff;
    
    border-left: 20px pink solid;
    
    /*border-right:20px red solid;*/
    
    border-top:20px green  solid;
    
    border-bottom:20px blue solid;
    
 }

    实验结果：。分析：未设置左边框，所以上下边框只向右边扩展。

  • 只设置左边框，不设置右边框，上下边框设置透明。 
    #demo
    
{
    
    width:0px;
    
    height:0px;
    
    background-color:#fff;
    
    border-left: 20px pink solid;
    
    /*border-right:20px red solid;*/
    
    border-top:20px transparent solid;
    
    border-bottom:20px transparent solid;
    
 }

实验结果：  分析，上下边框设置透明，左边框向上下扩展。

  • 实现一个小三角，先设置四边透明，再设置颜色，代码更简洁：

    #demo
    
{
    
    width:0px;
    
    height:0px;
    
    border: 20px transparent solid;
    
    border-left-color: #000;
    
}

    （3）把三角形放到正方形右侧。

　　　　分析：正方形是缺了一段，我们可以让三角形颜色为白色覆盖掉正方形的边框，另外再用一个黑色的比白色三角形大一点的三角形放在白三角形下面，这样就只漏出了三角形的两条边，所以这里就要用到before和after。

　　　1）因为before和after插入的三角形是放在指定的位置的，所以它们的position都设置为绝对定位absolute，那么div就要设置成相对定位relative。

这里首先回顾一下定位的区别：position(static(默认)|relative|fixed|absolute)

　　　　static:按照浏览器正常的文档流摆放 top left right bottom
　　　　relative：相对于static本来位置。即默认的位置
　　　　absolute 相对于父类元素定位，父元素的position必须是relative或者是absolute，如果不是，则继续往上查找父元素，如果一直找不到，则最后相对于body定位。
　　　　fixed：相对于body元素

　　2）首先绘出黑三角形

 #demo:before {

     content: ' ';

     width:;

     height:;

     border: solid transparent;

     left: 100%;

     top: 18px;

     position: absolute;

     border-width: 12px;

     border-left-color: #000;

 }

　　实验结果：

3）绘制白色三角形

 #demo:after

  {

     content: ' ';

     width:;

     height:;

     border: solid transparent;

     left: 100%;

     top: 20px;

     position: absolute;

     border-width: 10px;

     border-left-color: #fff;

  }

实验结果：

（4）整理CSS重叠属性，简化代码，最终完整页面HTML代码如下：

 <html>

     <head>

         <title>demo</title>

         <style type="text/css">

             #demo

             {

                 width: 100px;

                 height: 100px;

                 background-color: #fff;

                 position: relative;

                 border: 2px solid #000;

             }

             #demo:before, #demo:after

             {

                  border: solid transparent;

                 content: ' ';

                 height: 0px;

                 width: 0px;

                 left: 100%;

                 position: absolute;

             }

             #demo:before {

                 border-width: 12px;

                 border-left-color: #000;

                 top: 18px;

             }

              #demo:after

             {

                 top: 20px;

                 border-width: 10px;

                 border-left-color: #fff;

             }

         </style>

     </head>

     <body>

     <div id="demo">

     </div>

     </body>

 </html>

（5）终于完全明白了。2015-09-12      meggie

百度前端笔试题目--css 实现一个带尖角的正方形的更多相关文章

  1. 用CSS画一个带阴影的三角形的示例代码

    1. 思路 怎么用CSS3画一个带阴影的三角形呢 ? 有童鞋说, 这还不简单吗 网上有很多解决方案, 但其实大多都是实现不太完美的, 存在一些问题 假设我们做一个向下的三角形箭头 常见的方法大致有两种 ...

  2. html如何绘制带尖角（三角）的矩形

    结合实际情况自己写的: .menu_triangle { height: 10px; width: 10px; background-color: #049888; transform: transl ...

  3. 用CSS实现文本框尖角

    经常看到这样的尖角,以前不懂,以为都是用图片做出来的,后来惊奇的发现,原来很多都是用CSS做出来的,既美观又节省资源,真是两全其美啊! 那么,用CSS怎么实现这种效果呢?首先,来写一个简单的代码: & ...

  4. 一个小公司的前端笔试HTML CSS JS

    网上有这套题的答案,版本也很多,我做了很多参考.本文就当个小笔记,可能有错误,还望指正~ 第1章  Html篇 1. 你做的网页在哪些浏览器测试过?这些浏览器的内核分别是什么? 浏览器类型 内核 Fi ...

  5. 如何用css写一个带斜切角、有边框又有内外阴影的按钮呢？

    如果有一天,UI设计师丢过来一张UI稿,上面有这样一个带有斜切角.有边框还有内外阴影的按钮,你会怎么实现呢?第一反应切图?可是按钮内容.大小都是可变的,那得切多少图啊~Canvas?SVG?No,no ...

  6. Effective前端(3)用CSS画一个三角形

    来源:https://zhuanlan.zhihu.com/p/26160325 三角形的场景很常见,打开一个页面可以看到各种各样的三角形: 由于div一般是四边形,要画个三角形并不是那么直观.你可以 ...

  7. 前端笔试题目小结--获取输入参数用户名；查询URL字符串参数

    编写一个JavaScript函数getSuffix,用于获得输入参数的后缀名.如输入abc.txt,返回txt. str1 = "abc.txt"; function getSuf ...

  8. 前端笔试题目总结——应用JavaScript函数递归打印数组到HTML页面上

    数组如下: var item=[{ name:'Tom', age:70, child:[{ name:'Jerry', age:50, child:[{ name:'William', age:20 ...

  9. 来自网易云的黑科技，带尖角的div......

    今天在网易云的网页版听歌,话说Steve Vai的曲子永远是这么让人揣摩不透,不过我还时更喜欢老Joe,咦,跑题了··· 大家可以看到评论输入框和回复框,上面都有个小尖角,实现的方式有很多,我一般是用 ...

随机推荐

  1. Java学习笔记（1）：注释规范

    注释规范 1.   类注释 在每个类前面必须加上类注释,注释模板如下: 2.   属性注释 在每个属性前面必须加上属性注释,注释模板如下: 3.   方法注释 在每个方法前面必须加上方法注释,注释模板 ...

  2. hadoop实现共同出现的单词(Word co-occurrence)

    共同出现的单词(Word co-occurrence)是指在一个句子中相邻的两个单词.每一个相邻的单词就是一个Co-Occurrence对. Sample Input: a b cc, c d d c ...

  3. 正则-匹配获取url参数

    1.根据指定参数名获取参数值 A页面向连接到B页面的url为: http://www.189dg.com/ajax/sms_query.ashx?action=smsdetail&sid=22 ...

  4. Linux(CentOS)搭建SVN服务器全攻略

    虽然在windows上搭建SVN很简单,但是效能却不高,这当然是和linux相比了.然而在linux上搭建SVN却非常繁琐,所以今天这篇文章就来一步一步教您如何在Centos上搭建SVN 安装#yum ...

  5. 怎么加sudo权限

    安装好Debian后还不能使用sudo如果没有安装sudo,则在root用户下apt-get install sudo在root设置sudoers配制文件chmod +w /etc/sudoersvi ...

  6. LINUX的命令（未完待续）

    遇到忘了的Linux命令,复习之后,把它记在这里,供以后复习. ^C:刚开始在看视频的时候发现上面有cd ^C,还以为这是个什么命令,其实^C这不是输入进去的,当你按了Ctrl+C之后就会出现^C,C ...

  7. 限制对比度自适应直方图均衡（Contrast Limited Adaptive histgram equalization/CLAHE)

    转自:http://www.cnblogs.com/Imageshop/archive/2013/04/07/3006334.html 一.自适应直方图均衡化(Adaptive histgram eq ...

  8. Spark 资源调度及任务调度

    1.  资源分配 通过SparkSubmit进行提交应用后,首先会创建Client将应用程序(字节码文件.class)包装成Driver,并将其注册到Master.Master收到Client的注册请 ...

  9. c++封装性

    C++ code到运行程序 作为一个c++程序员这个应该是最应该知道的细节,简言之:编译----链接----可执行的程序.这里所说的细节主要是第一步的细节,编译器如何把c++代码编译成目标代码.概括的 ...

  10. 在VC中检测内存泄漏

    声明:checkleaks.h和checkleaks.cpp这两个文件中的代码是在网上COPY的,但原来那个网站现在却找不到了 所以,这篇文章不算完全原创,呵呵. 就当作是一个存档吧 先上代码: // ...