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

利用CSS制作尖角

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

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

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

  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 国际 许可协议,如需转载,请注明出处

评论

  •  
  • 关于JS和CSS的两个调查网站

    javascript年度调查已经执行了两三年,css调查刚刚才开始。通过这些调查, 我们可以了解到现在关注度最高的js\css是什么

    发布:2019-03-05 阅读(245)

  • Css Grid fr单位

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

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

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

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

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

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

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

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

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

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

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

  • CSS中伪类和伪元素总结

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

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

  • windows下利用nvm安装node,管理node版本

    nvm是node安装及版本管理工具

    发布:2018-12-29 阅读(386)

  • 利用react-hot-loader实现局部更新

    React Hot Loader是一个插件,允许React组件在不丢失状态的情况下进行实时重新加载。它适用于Webpack和其他支持热模块替换(HMR)和Babel插件的捆绑器

    发布:2018-12-27 阅读(303)

  • 利用electron-builder打包electron成exe

    electron-builder相对electron-packager有更丰富的的功能,支持更多的平台,同时也支持了自动更新,electron-builder打出的包更为轻量,并且可以打包出不暴露源码的setup安装程序

    发布:2018-12-10 阅读(768)

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

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

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