css2----实现三角形和带角框

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
<style>
    /*三角形*/
  /* div{width:0;height:0;border-top:10px solid transparent;border-bottom:10px solid transparent;border-left:10px solid;} */
    /*带角框*/
    div{width:100px;height:100px;border:2px solid;}

    div::before{content:"";display:block;width:0;height:0;border-top:8px solid transparent;border-bottom:8px solid transparent;border-left:8px solid black;position:relative;top:10px;left:100px;}
    div::after{content:"";display:block;width:0;height:0;border-top:8px solid transparent;border-bottom:8px solid transparent;border-left:8px solid white;position:relative;top:-6px;left:98px;}

</style>
</head>
<body>
<div></div>

</body>
</html>

实现三角形的原理:1,div的border生成是向外扩的,2,当div有相邻border时,拐角处会以一种各占一半的三角拼合。所以当设这div的宽高为0和0时,如果它有四个border的话,就会组成一个正方形,每边分别为一个等腰三角形,此时若设任意三边对望的两个边为透明色(transparent)时,剩下的一边为一个等腰三角形。

带角框实现原理:利用两个三角形的相对定位使产生视觉上的相减形成不闭合的角号(“>”)。

时间: 2024-10-14 10:53:50

css2----实现三角形和带角框的相关文章

Android UI(五)云通讯录项目之联系人列表,带侧滑选择,带搜索框

作者:泥沙砖瓦浆木匠网站:http://blog.csdn.net/jeffli1993个人签名:打算起手不凡写出鸿篇巨作的人,往往坚持不了完成第一章节.交流QQ群:[编程之美 365234583]http://jq.qq.com/?_wv=1027&k=XVfBTo 要捐钱的就打支付宝吧:13958686678(泥瓦匠开个玩笑~) 一.前言 继续AndroidUI系列,泥瓦匠又要开始扯淡了.哈哈今天在文章头加了个支付宝账号.我也真逗,至今没收到一笔是写博客的钱.或是分享的.泥瓦匠也就挂着逗逗乐

底边栏Tab切换Fragment,带角标显示效果

类似于手机版qq的底边栏Tab效果有很多种实现方法,比如TabActivity.自定义RadioGroup等.由于高版本下TabActivity已经被废弃,而且Activity比较重量级,所以一般不使用TabActivity.这里分享一种我写的自定义底部Tab的方法,顺带加上底部标签的角标显示效果.效果如下: 关于Demo需要交代几点: 1.这个Demo中并没有对尺寸做适配,在不同机型的手机上运行需要调整代码中的尺寸相关代码. 2.角标效果只是个演示效果,逻辑可能并不合理,具体显示或者改变.隐藏

css制作三角形,下拉框三角形

网站制作中常常需要下拉框,而如果下拉框如果只是单纯的矩形则会显得太过单调,所以这次教大家利用css制作三角形放在矩形上面 首先利用css制作三角形 div { width:0px; height:0px; border-top:20px solid transparent; border-left:20px solid transparent; border-right:20px solid transparent; border-bottom:20px solid green; } <div>

EasyUI带选择框的DataGrid实现点击行&quot;不选中或取消选中&quot;的解决方法。

1 var IsCheckFlag = true; //标示是否是勾选复选框选中行的,true - 是 , false - 否 2 $("#dg").datagrid({ 3 rownumbers:true, 4 url: 'LeadsData.ashx?o=list', 5 method:'get', 6 fit: true, 7 striped:true, 8 pagination: true, 9 fitColumns: true, 10 checkOnSelect: false

wpf企业应用之带选项框的TreeView

wpf里面实现层次绑定主要使用HierarchicalDataTemplate,这里主要谈一谈带checkbox的treeview,具体效果见 wpf企业级开发中的几种常见业务场景. 先来看一下我的控件绑定,我这里实现的是模块权限的编辑.具体效果就是选中一个节点,后代节点.祖代节点状态都会发生相应变化,具体变化逻辑大家都懂的,描述起来很罗嗦. <TreeView Name="TreeView_Right" ItemsSource="{Binding ModuleRigh

iOS 原生二维码扫描,带扫描框和扫描过程动画

在代码中使用了相对布局框架Masonry 准备两张图片,一张是扫描边框,一张是扫描时的细线分别命名 scanFrame.png和scanLine.png并提前放入工程 导入相对布局头文件 #define MAS_SHORTHAND #define MAS_SHORTHAND_GLOBALS #import "Masonry.h" 导入依赖头文件 #import <AVFoundation/AVFoundation.h> 具体代码如下: static const char *

利用CSS三角形实现的冒泡框

请用CSS实现如下图的样式,相关尺寸如图示,其中dom结构为:<div id=”demo”></div> 这是一道去年的百度笔试题. 涉及定位.三角形.伪元素. 下面是我的解答以及一些知识概述,都在程序里了. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title

EasyUI带选择框的DataGrid实现点击行"不选中或取消选中"的解决方法

var IsCheckFlag = true; //标示是否是勾选复选框选中行的,true - 是 , false - 否  $("#dg").datagrid({      rownumbers:true,      url: 'LeadsData.ashx?o=list',      method:'get',      fit: true,      striped:true,      pagination: true,      fitColumns: true,     c

不带搜索框,数据同步请求,产品按字母分组组件

组件效果: 搜索效果: 组件js 代码: /* * * 全局空间 SearchBox * */var SearchBox = {};/* * * 静态方法集 * @name _method * */SearchBox._method = { /* 选择元素 */ $:function (arg, context) { var tagAll, n, eles = [], i, sub = arg.substring(1); context = context || document; if (ty