首页
Javascript
Html
Css
Node.js
Electron
移动开发
工具类
服务端
浏览器相关
前端收藏
其他
关于

利用CSS制作尖角

2012年10月15日 发布 阅读(443) 作者:懒炖

用两个◆制作尖角(引用腾讯微博中的做法)

要点:使用了两个◆,利用其位置相差度来表示框线,如果没有外框线则可以使用一个◆,具体看代码

  1. .popBox {
  2. width:200px;
  3. height:300px;
  4. border:#ddd solid 1px;
  5. background:#f5f5f5;
  6. position:relative;
  7. margin-left:100px;
  8. }
  9. .popBox span {
  10. position:absolute;
  11. left:-9px;
  12. width:20px;
  13. height:20px;
  14. top:50px;
  15. font-size:19px;
  16. color:#f5f5f5;
  17. overflow:hidden;
  18. display:block;
  19. }
  20. .popBox em {
  21. font-style:normal;
  22. position:absolute;
  23. left:-11px;
  24. width:20px;
  25. height:20px;
  26. top:50px;
  27. font-size:19px;
  28. color:#ddd;
  29. overflow:hidden;
  30. display:block;
  31. }

html

  1. <div>
  2. <em></em>
  3. <span></span>
  4. </div>
版权声明:本站文章除特别声明外,均采用署名-非商业性使用-禁止演绎 4.0 国际 许可协议,如需转载,请注明出处

评论

  •  
  • 使用 media query 进行 IE 的 CSS Hack

    通过 media query 进行 CSS 的 hack。在 IE 中它们可以识别出这些特殊的符号 \0,\, 以及 \9,然后结合 media query 可以更好进行样式的区分

    发布:2019-08-07 阅读(71)

  • Css Grid fr单位

    css fr 单位是一个自适应单位,fr单位被用于在一系列长度值中分配剩余空间,如果多个已指定了多个部分,则剩下的空间根据各自的数字按比例分配。

    发布:2019-02-28 阅读(477)

  • CSS Grid网格布局指南(学习)

    CSS网格布局是CSS中最强大的布局系统。它是一个二维系统,这意味着它可以处理列和行,不像flexbox主要是一维系统。CSS网格布局用于将页面分割成数个主要区域,或者用来定义组件内部元素间大小、位置和图层之间的关系。像表格一样,网格布局让我们能够按行或列来对齐元素。 但是,使用CSS网格可能还是比CSS表格更容易布局。 例如,网格容器的子元素可以自己定位,以便它们像CSS定位的元素一样,真正的有重叠和层次。

    发布:2019-02-28 阅读(443)

  • 什么是Sass,SCSS与它是什么关系?

    什么是Sass,SCSS与它是什么关系?

    发布:2019-02-26 阅读(440)

  • css3 自定义浏览器滚动条(scrollbar)

    通过-webkit-scrollbar自定义浏览器滚动条,支持webkit的浏览器可正常显示(如chrome,safari,QQ浏览器,360极速等)

    发布:2019-01-28 阅读(497)

  • CSS中伪类和伪元素总结

    css伪类和伪元素有什么区别?

    发布:2019-01-14 阅读(362)

  • 视窗单位vm,vh,vmin,vmax

    记录下响应式布局单位(视窗单位:viewport units)的应用,最近用electron开发桌面应用,用到vh,vw还是蛮方便的.

    发布:2019-01-09 阅读(162)

  • 妙法攻略:渐变虚框及边框滚动动画的纯CSS实现

    CSS3实现滚动边框,渐变边框

    发布:2018-12-07 来源:张鑫旭

  • CSS3 手册

    CSS3 是层叠样式表(Cascading Style Sheets)语言的最新版本,旨在扩展CSS2.1。它带来了许多期待已久的新特性, 例如圆角、阴影、gradients(渐变) 、transitions(过渡) 与 animations(动画) 。以及新的布局方式,如 multi-columns 、 flexible box 与 grid layouts。实验性特性以浏览器引擎为前缀(vendor-prefixed),应避免在生产环境中使用,或极其谨慎地使用,因为将来它们的语法和语义都有可能被更改。

    发布:2018-11-06 来源:mozilla

  • [布局概念] 关于CSS-BFC深入理解

    BFC(Block formatting context)直译为&amp;quot;块级格式化上下文&amp;quot;。它**是一个独立的渲染区域**,只有**Block\-level box**参与(在下面有解释), 它规定了内部的Block\-level Box如何布局,并且与这个区域外部毫不相干。

    发布:2017-06-09 阅读(30)

  • 移动端retina屏1px细边框问题

    retina屏下(window.devicepixelratio>1),1px的边框会被渲染成2px,看起会比较粗,如何解决?

    发布:2017-02-15 阅读(476)

  • 隐藏input type=number元素,右侧的上下箭头

    通过CSS隐藏input='number'时,右侧的箭头

    发布:2015-08-21 阅读(702)

  • 移动端 UC浏览器字体放大的问题

    在做移动端页面时,发现UC浏览器在文字居多的页面(如文章页面、关于我们页面),字体会自动放大。其他的浏览器都没有问题~~

    发布:2015-08-17 阅读(409)

  • 利用rgba和filter设置CSS背景颜色半透明且不影响子元素,兼容IE6-8

    css设置子元素半透明,兼容IE6-8

    发布:2013-05-28 阅读(449)

  • text-overflow:clip | ellipsis 单行截断文字

    利用CSS截断单行文字,溢出的显示"..."

    发布:2012-11-23 阅读(419)

  • 禁止<textarea>标签右下角拉动

    HTML标签textarea在大部分浏览器中只要指定行(rows)和列(cols)属性,就可以规定 textarea 的尺寸,大小就不会改变,不过更好的办法是使用 CSS 的 height 和 width 属性,但是Chrome,Safari和FireFox渲染的效果不同,可以拖动右下角图标改变大小

    发布:2012-11-14 阅读(410)

  • 去掉Chrome,Safari等浏览器input,select,textarea等form元素的高亮效果

    chrome、safari等现代浏览器,input,textarea,select等一些Form元素,会有一个默认的高亮样式

    发布:2012-11-13 阅读(415)

  • CSS设置超链接a:link,a:visited,a:hover,a:active的顺序

    CSS针对超链接4个状态的设置是有顺序的,顺序不对,a链接的各种状态可能不会生效

    发布:2012-10-23 阅读(473)

  • CSS常用hack技巧

    在当前的WEB前端页面制作中,鉴于市面上浏览器种类繁多(IE6-IE9、firefox、Chrome、Safari、Opera等等),各种浏览器对CSS的解析效果会有所不同(少数),所以要想让页面完全的兼容所有浏览器,就必须要用css hack。可能不同的开发人员,使用的hack方式不一样,但最终的目的都是希望各种浏览器渲染出同样的页面效果

    发布:2012-10-16 阅读(591)

  • 利用CSS制作尖角

    用两个◆制作尖角(引用腾讯微博中的做法)

    发布:2012-10-15 阅读(443)