下拉菜单或者左侧右侧三角的设置方法

1.通过边框书写三角形:

         html部分:主要是设置两个盒子。

<body>
		<div class="one"></div>
		<div class="two"></div>
</body>

        css部分:

.one{
	width: 0;
	height: 0;
	border-top:100px solid transparent;
	border-bottom: 100px solid transparent;
	border-left: 100px solid blue;
	border-right: 100px solid green;
}
.two{
	width: 0;
	height: 0;
	border: 100px solid transparent;
	border-bottom: 100px solid red;
}

        css代码解析:

        .one里面的样式给宽高为0,主要是让内容区为0;使方框只剩下边框,然后给边框添加厚度,其中给上下100px边框的厚度,但是方框的颜色为透明色,左右给100px边框厚度,颜色为蓝色和绿色。

.one的实现效果如下:

         .two则是同时给四个方向边框厚度,然后给他透明色,,然后根据需要,给需要加的方向添加边框厚度和颜色就可以实现三角效果。

.two的实现效果如下:

 2.透过旋转盒子,实现三角的效果(这种设置方式就可以给边框添加颜色)

        html代码块部分:

<body>
		<div class="one"></div>
		<div class="two"></div>
</body>

        css部分:

<style>
	.one{
		position: relative;
		width: 150px;
		height: 30px;
		color: white;
		border: 1px solid #47852b;
		background-color: #67A54B;
		border-radius: 5px 0 0 5px;
	}
	.two{
		position: absolute;
		left: 149px;
		top: 13px;
		width: 21px;
		height: 21px;
		background-color: #67A54B;
		transform: rotate(135deg);
		border-top: 1px solid red;
		border-left: 1px solid #47852b;
	}
</style>

css代码块解析:

.one里面主要是给它一个宽高和背景色(其中的color是给里面字体的颜色)给它一个像素的边框,。border-radius是给他的边框一个圆角效果,其中给的数值是左上和左下各五个像素的边框圆角效果。

.one的效果图: 

 这里面牵扯到绝对定位和相对定位知识(主要运用的知识就是子绝父相,如上面所写的,右侧的盒子是需要根据左侧的盒子进行位置的调整,所以右侧的盒子是左侧盒子的孩子,所以它是相对定位,左侧的盒子就是绝对定位。

.two里面也是给他宽高和背景颜色,将盒子进行旋转设置(默认情况是顺时针进行旋转),然后根据现在盒子的位置,将它调整到自己所需要的位置,如果需要对盒子进行边框的设置,也可以对边框的颜色进行设置。

.two的效果如下:

 整体完成之后效果如下:

     

 三角设置的方法基本以上面两种为主,后面的(::before或者::after)伪元素添加三角的方法基本以上面两种方法为基础进行设置,上面两种使用自然,就可以根据需要进行变化。

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值