css border 制作三角形

border 边框

上三角是只有上面的border 有颜色，其余的边框都是tranparents,下三角只有下面的border 有颜色,其余的边框都是tranparents,左三角只有左面的border 有颜色,其余的边框都是tranparents,右三角只有右面的border 有颜色,其余的边框都是tranparents,

代码

/***三角***//***外层***/#imgMouseOver{    position: absolute;    top:48px;    left:-42px;    width:103px;    -webkit-border-radius:5px;    -moz-border-radius:5px;    border-radius:5px;    border:1px solid #dfdfdf;    background: #fff;    z-index:999;    box-shadow: 2px 2px 2px #ddd;    padding:4px 2px;    display: none;}/***小三角***/#imgMouseOver .sanjiao{    position: absolute;    top:-20px;    left:50%;    width:0px;    margin-left:-3px;    height:0px;    border-width:10px 6px;    border-style:solid;    border-color:transparent transparent #dfdfdf transparent;}#showContent{    height:30px;    line-height:30px;    text-align:center;}

html 代码

<div id='imgMouseOver'><i class='sanjiao'></i> <p id='showContent'></p></div>

转载于:https://www.cnblogs.com/daiwenru/p/7220851.html

css border 制作三角形相关推荐

【css】巧用border制作三角形
#css用border制作三角形 1.利用CSS盒模型盒模型上下左右边框交界处出呈现平滑的斜线. 利用这个特点, 通过设置不同的上下左右边框宽度或者颜色可以得到小三角调整宽高大小可以调节三角形形 ...
css border制作小三角形状及应用（兼容IE6）
原理 css盒模型一个盒子包括: margin+border+padding+content – 上下左右边框交界处出呈现平滑的斜线. 利用这个特点, 通过设置不同的上下左右边框宽度或者颜色可以得到 ...
利用border制作三角形原理
网站前端页面中,有时候会使用一些三角形,除了使用图片的方式之外,利用css的border属性也可以做出相对应的三角形.那么,利用border是如何实现三角形的制作的呢? 先看下面一个例子: CSS代码 ...
前端CSS border实现三角形border-color
最近在写一个项目,然后想做一个带三角形的导航栏,然后突然发现自己还不知道前端怎么写出一个三角形(太菜了)... 然后本来打算用canvas画一个出来的,发现有点大材小用???然后百度才发现可以直接用b ...
html样式border倒三角写法,纯CSS - border绘制三角形（各种角度）
我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...
html如何把上边角做成椭圆,使用css3的border-radius和border制作半圆、三角、椭圆等各种图形...
自从有了css3,我们可以制作各种各样的图形了,制作圆角也可以不使用图片了,我们可以使用border-radius可以制作圆角,椭圆等图形.下面我们来看一下如何制作这些的(以下例子请在现代高级浏览器浏 ...
css中border制作各种形状
css利用border制作各种形状的原理如图: 使用border绘制三角形是什么原理?事实上,宽度相等的border是以45度对接的,如下图: 没有了上border如图所示: 再设置border的宽度 ...
php绘制一个三角形,如何利用css或html5画出一个三角形？两种不同的制作三角形方法（代码实例）...
我们在平时的前端开发的时候,有时候是需要一些小图形来丰富一下页面效果,比如:下拉列表的倒三角图形.那么这样的一个三角形是如何制作出来的,本章给大家介绍如何利用css或html画出一个三角形?两种不同的 ...
CSS——制作三角形
文章目录前言一.上三角形的制作二.右三角形的制作总结前言本文主要介绍如何利用css制作三角形~ 一.上三角形的制作 1.示例图: 2.方法简介: 1.将宽和高设为0,利用border制作合 ...

css border 制作三角形

css border 制作三角形相关推荐

最新文章

热门文章