网上科普有关“如何用css 绘制边长相等且有边框的六边形 ”话题很是火热，小编也是针对如何用css 绘制边长相等且有边框的六边形寻找了一些与之相关的一些信息进行分析 ，如果能碰巧解决你现在面临的问题 ，希望能够帮助到您 。
首先，我的思路是六边形由一个长方形 ，两个三角形拼成 。
css绘制有边框的三角形 ，比如你的六边形需要有白色的边框，红色的背景色 ，那么你的三角形则有白色的大三角形和红色的小三角形重叠在一起 ，组成一个白色边框的三角形。
之前用before ，after写完无边框的六边形，写有边框的六边形只好推翻这种方法重新写了 。 。。
我的项目是几个六边形 ，不规则的摆放 ，需要定位，给六边形添加hover效果 。
最终 ，六边形画出来之后 ，PSD是1920的大小，算是高分辨率了 ，无法自适应不同分辨率的屏幕 ，还得用rem,我用的是hotcss，不需要自己计算px与rem之间的转换? 实现了自适应 ，hotcss的使用详情请点击这个链接：?点击打开链接 。
<div?><div?>
<div?>
<div?></div>
</div>
<div?><a?href="javascript:?void(0);">农业大数据</a></div>
<div?>
<div?></div>
</div>
</div>
<div?>
<div?>
<div?></div>
</div>
<div?><a?href="javascript:?void(0);">物联监管</a></div>
<div?>
<div?></div>
</div>
</div>
<div?>
<div?>
<div?></div>
</div>
<div?><a?href="javascript:?void(0);">畜牧</a></div>
<div?>
<div?></div>
</div>
</div>
<div?>
<div?>
<div?></div>
</div>
<div?><a?href="javascript:?void(0);">质量溯源</a></div>
<div?>
<div?></div>
</div>
</div>
<div?>
<div?>
<div?></div>
</div>
<div?><a?href="javascript:?void(0);">病虫害监测</a></div>
<div?>
<div?></div>
</div>
</div>
<div?>
<div?>
<div?></div>
</div>
<div?><a?href="javascript:?void(0);">水产</a></div>
<div?>
<div?></div>
</div>
</div>
<div?>
<div?>
<div?></div>
</div>
<div?><a?href="javascript:?void(0);">休闲旅游</a></div>
<div?>
<div?></div>
</div>
</div>
<div?>
<div?>
<div?></div>
</div>
<div?><a?href="javascript:?void(0);">电子商务</a></div>
<div?>
<div?></div>
</div>
</div>
</div>
css代码：
[css]?view?plain?copy?print?
/*?8个导航的样式?*/
.content?.nav?{
float:?right;
width:?750px;
position:?relative;
}
.hex-wrap?{
position:?absolute;
cursor:?pointer;
}
.hex-wrap1?{
left:?170px;
top:?0px;
}
.hex-wrap2?{
left:?90px;
top:?148px;
}
.hex-wrap3?{
left:?0px;
top:?296px;
}
.hex-wrap4?{
left:?300px;
top:?94px;
}
.hex-wrap5?{
left:?215px;
top:?242px;
}
.hex-wrap6?{
left:?516px;
top:?27px;
}
.hex-wrap7?{
left:?435px;
top:?175px;
}
.hex-wrap8?{
left:?348px;
top:?323px;
}
.fore?{
/*绘制一个宽80px,高136px?的长方形*/
width:?80px;
height:?136px;
text-align:?center;
position:?relative;
font-size:?24px;
border-top:?1px?solid?#dfe8f2;
border-bottom:?1px?solid?#dfe8f2;
}
.hex-border-left?{
position:?relative;
content:?"";
width:?0;
height:?0;
border-top:?69px?solid?transparent;
border-bottom:?69px?solid?transparent;
}
.hex-left?{
/*左边的三角形*/
content:?"";
width:?0;
height:?0;
border-top:?68px?solid?transparent;
border-bottom:?68px?solid?transparent;
position:?absolute;
left:?1px;
top:?-68px;
}
.hex-border-right?{
position:?relative;
content:?"";
width:?0;
height:?0;
border-top:?69px?solid?transparent;
border-bottom:?69px?solid?transparent;
}
.hex-right?{
/*右边的三角形*/
content:?"";
width:?0;
height:?0;
border-top:?68px?solid?transparent;
border-bottom:?68px?solid?transparent;
position:?absolute;
right:?1px;
top:?-68px;
}
.fore?a?{
color:?#fff;
text-decoration:?none;
cursor:?pointer;
position:?absolute;
white-space:?nowrap;
width:?150px;
text-align:?center;
display:?block;
top:?50px;
left:?-35px;
z-index:?99;
}
.hex-border-left?{
border-right:?41px?solid?#fff;
}
.hex-border-right?{
border-left:?41px?solid?#fff;
}
.fore1?{
background-color:?#3498db;
}
.hex-border-left1?.hex-left?{
border-right:?40px?solid?#3498db;
}
.hex-border-right1?.hex-right?{
border-left:?40px?solid?#3498db;
}
.fore2?{
background-color:?#1abc9c;
}
.hex-border-left2?.hex-left?{
border-right:?40px?solid?#1abc9c;
}
.hex-border-right2?.hex-right?{
border-left:?40px?solid?#1abc9c;
}
.fore3?{
background-color:?#f1c40f;
}
.hex-border-left3?.hex-left?{
border-right:?40px?solid?#f1c40f;
}
.hex-border-right3?.hex-right?{
border-left:?40px?solid?#f1c40f;
}
.fore4?{
background-color:?#9b59b6;
}
.hex-border-left4?.hex-left?{
border-right:?40px?solid?#9b59b6;
}
.hex-border-right4?.hex-right?{
border-left:?40px?solid?#9b59b6;
}
.fore5?{
background-color:?#95a5a6;
}
.hex-border-left5?.hex-left?{
border-right:?40px?solid?#95a5a6;
}
.hex-border-right5?.hex-right?{
border-left:?40px?solid?#95a5a6;
}
.fore6?{
background-color:?#e74c3c;
}
.hex-border-left6?.hex-left?{
border-right:?40px?solid?#e74c3c;
}
.hex-border-right6?.hex-right?{
border-left:?40px?solid?#e74c3c;
}
.fore7?{
background-color:?#2ecc71;
}
.hex-border-left7?.hex-left?{
border-right:?40px?solid?#2ecc71;
}
.hex-border-right7?.hex-right?{
border-left:?40px?solid?#2ecc71;
}
.fore8?{
background-color:?#e67e22;
}
.hex-border-left8?.hex-left?{
border-right:?40px?solid?#e67e22;
}
.hex-border-right8?.hex-right?{
border-left:?40px?solid?#e67e22;
}
.hex-wrap1:hover?.fore1?{
background-color:?#39B0FF;
border-top:?1px?solid?#39B0FF;
border-bottom:?1px?solid?#39B0FF;
}
.hex-wrap1:hover?.hex-border-left1?{
border-right:?41px?solid?#39B0FF;
}
.hex-wrap1:hover?.hex-border-right1?{
border-left:?41px?solid?#39B0FF;
}
.hex-wrap1:hover?.hex-left?{
border-right:?40px?solid?#39B0FF;
}
.hex-wrap1:hover?.hex-right?{
border-left:?40px?solid?#39B0FF;
}
本篇文章给大家带来的内容是关于如何用css实现直接画出三角形以及对话形式的三角形（附代码） ，有一定的参考价值，有需要的朋友可以参考一下 ，希望对你有所帮助。
在商品展示中 ，画三角形的出现的也挺多的，左上角的三角标签，又或者对话形式的三角形 ，带阴影效果等 ，在此记录下
1 、直接添加三角形
<div >
<div >
<div ></div>
<div >想你呦</div>
</div>
</div>
<style>
body {
background: #e5e5e5;
}
.triangleContainer {
margin: 50px auto;
width: 500px;
height: 400px;
background: #fff;
}
.triangleContent {
position: relative;
}
.triangle {
position: absolute;
right: -70px;
top: -70px;
transform: rotate(45deg);
/* 比较长的写法 */
/*border-top: 70px solid transparent;*/
/*border-bottom: 70px solid red;*/
/*border-left: 70px solid transparent;*/
/*border-right: 70px solid transparent;*/
/* 简单写法 */
border: 70px solid transparent;
border-bottom-color: red;
}
.title {
position: absolute;
right: 8px;
top: 17px;
transform: rotate(45deg);
font-size: 19px;
color: #fff;
}
</style>
2 、使用伪类添加三角形（附带阴影效果）
添加两个伪类：一个伪类实现三角形，另一个用定位实现阴影效果
<view >
<text >邀请越多的好友 ，中奖几率越高哦！</text>
<text >我知道了</text>
</view>
.promptInfo{
position: absolute;
left: 5%;
top: -28rpx;
margin: 0 auto;
padding: 20rpx 0;
box-sizing: border-box;
width: 88%;
border-radius: 10rpx;
z-index: 999;
background: #fff;
box-shadow: 3rpx 3rpx 3rpx rgba(0,0,0,.2);
border: 0;
font-size: 30rpx;
}
/* 添加与阴影颜色相同来形成三角形的阴影效果 */
.promptInfo::before{
position: absolute;
bottom: -21rpx;
right: 110rpx;
z-index: 999;
border-top: 20rpx solid rgba(0,0,0,.2);
border-left: 20rpx solid transparent;
border-right: 20rpx solid transparent;
content: ""
}
.promptInfo::after{
position: absolute;
bottom: -17rpx;
right: 110rpx;
z-index: 999;
border-top: 20rpx solid #fff;
border-left: 20rpx solid transparent;
border-right: 20rpx solid transparent;
content: ""
}
.promptInfo .inviteMessage{
padding-left: 30rpx;
}
.promptInfo .clickMessage {
display: inline-block;
margin-left: 15rpx;
padding: 10rpx 20rpx;
color: #fff;
background: red;
border-radius: 30rpx;
}
关于“如何用css 绘制边长相等且有边框的六边形 ”这个话题的介绍 ，今天小编就给大家分享完了，如果对你有所帮助请保持对本站的关注！
本文来自作者[焉名哲]投稿，不代表哔哔号立场，如若转载，请注明出处：https://www.ibb4.com/cshi/202512-2136.html
评论列表（4条）
我是哔哔号的签约作者“焉名哲”！
希望本篇文章《如何用css 绘制边长相等且有边框的六边形》能对你有所帮助！
本站[哔哔号]内容主要涵盖：国足,欧洲杯,世界杯,篮球,欧冠,亚冠,英超,足球,综合体育
本文概览：网上科普有关“如何用css 绘制边长相等且有边框的六边形”话题很是火热，小编也是针对如何用css 绘制边长相等且有边框的六边形寻找了一些与之相关的一些信息进行分析，如果能碰巧解...