1. Python技术站首页
  2. css

css3实现六边形边框的实例代码

• css

下面是css3实现六边形边框的攻略，分成以下几个部分：

1.初步准备

首先，我们需要定义一个六边形的容器（div）：

<div class="hexagon"></div>

然后，给这个容器定义一些基本样式：

.hexagon {
  width: 120px;
  height: 100px;
  background-color: #eee;
  position: relative;
  margin: 0 auto;
}

现在，我们已经定义了一个基本的六边形容器，接下来我们需要对这个容器进行进一步的处理。

2.使用clip-path创建六边形

现在，我们要使用clip-path创建一个六边形。clip-path是一个CSS属性，它可以根据指定的形状，将元素的可见区域剪裁成某种形状。

.hexagon {
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}

使用clip-path属性后，我们的六边形容器的边缘就变成了六边形的形状。

3.使用伪元素绘制六边形边框

现在，我们已经有了一个基本的六边形，接下来我们需要绘制六边形的边框。这里，我们可以使用伪元素（pseudo-elements）来绘制。

.hexagon::before,
.hexagon::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}

这里我们定义了两个伪元素::before和::after，并使用clip-path为它们定义成六边形的形状。现在，我们的容器周围已经框起了一个六边形的形状，但是边框会覆盖原始的背景色，我们需要把边框变成透明的。接下来我们将透明边框添加到伪元素的样式中：

.hexagon::before,
.hexagon::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  border: 10px solid transparent;
}

这样之后，我们的边框就变成了透明S的，现在我们需要将边框的另一个属性设置为颜色。

.hexagon::before,
.hexagon::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  border: 10px solid transparent;
  border-top-color: #f00;
}

现在，我们的边框已经变成了红色，但是我们只画了一个三角形的边框，我们需要将这个边框绕着六边形旋转五次，形成六边形。接下来我们将前两行去掉，使用transform将边框旋转。

.hexagon::before,
.hexagon::after {
  /*content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);*/
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  border: 10px solid transparent;
  border-top-color: #f00;
  transform: rotate(60deg);
}

这里我们将伪元素旋转了60度，接下来我们再将伪元素复制五次，每个伪元素旋转60度，就可以得到一个六边形的边框了。

.hexagon::before,
.hexagon::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  border: 10px solid transparent;
  border-top-color: #f00;
}

.hexagon::before {
  transform: rotate(60deg);
}

.hexagon::after {
  transform: rotate(-60deg);
}

.hexagon::before::before {
  transform: rotate(120deg)
}

.hexagon::before::after {
  transform: rotate(-60deg)
}

.hexagon::after::before {
  transform: rotate(60deg)
}

.hexagon::after::after {
  transform: rotate(-120deg)
}

现在，我们已经完成了一个六边形的边框，效果如下：

示例说明1

下面我们来看一个示例，如何在一个背景图片的上方绘制六边形边框。

先去掉原先六边形的背景色和边框：

.hexagon {
  width: 120px;
  height: 100px;
  position: relative;
  margin: 0 auto;
}

然后将六边形容器设置一个背景图片：

.hexagon {
  /* width: 120px;
  height: 100px; */
  position: relative;
  margin: 0 auto;
  background: url('https://picsum.photos/120/100') center/cover no-repeat;
}

最后按照之前的步骤给六边形容器添加六边形边框即可：

.hexagon {
  /* width: 120px;
  height: 100px; */
  position: relative;
  margin: 0 auto;
  background: url('https://picsum.photos/120/100') center/cover no-repeat;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  border: 10px solid transparent;
}

.hexagon::before,
.hexagon::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  border: 10px solid transparent;
  border-top-color: #f00;
}

.hexagon::before {
  transform: rotate(60deg);
}

.hexagon::after {
  transform: rotate(-60deg);
}

.hexagon::before::before {
  transform: rotate(120deg)
}

.hexagon::before::after {
  transform: rotate(-60deg)
}

.hexagon::after::before {
  transform: rotate(60deg)
}

.hexagon::after::after {
  transform: rotate(-120deg)
}

示例完成后，效果应该长成下面这样：

示例说明2

下面我们来看一下，如何在六边形边框内部绘制一张图片。

首先给我们的六边形容器添加一个父容器：

<div class="container">
  <div class="hexagon"></div>
</div>

然后给容器添加一些基本样式：

.container {
  width: 300px;
  height: 260px;
  margin: 0 auto;
  background-color: #eee;
  position: relative;
}

.hexagon {
  width: 120px;
  /* height: 100px; */
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  border: 10px solid transparent;
}

.hexagon::before,
.hexagon::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  border: 10px solid transparent;
  border-top-color: #f00;
}

.hexagon::before {
  transform: rotate(60deg);
}

.hexagon::after {
  transform: rotate(-60deg);
}

.hexagon::before::before {
  transform: rotate(120deg)
}

.hexagon::before::after {
  transform: rotate(-60deg)
}

.hexagon::after::before {
  transform: rotate(60deg)
}

.hexagon::after::after {
  transform: rotate(-120deg)
}

这样，我们就得到了一个包含背景颜色和六边形的容器。

接下来，就可以在六边形边框内部绘制图片了。我们可以在容器中添加一个图片元素，并将其定位在六边形容器的内部。

<div class="container">
  <div class="hexagon"></div>
  <img src="https://picsum.photos/120/100/?random" alt="">
</div>

然后，我们可以将这个图片元素绝对定位到容器的中心，使它居中对齐到六边形容器的中心。

.container {
  width: 300px;
  height: 260px;
  margin: 0 auto;
  background-color: #eee;
  position: relative;
}

.hexagon {
  width: 120px;
  /* height: 100px; */
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  border: 10px solid transparent;
}

.hexagon::before,
.hexagon::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  border: 10px solid transparent;
  border-top-color: #f00;
}

.hexagon::before {
  transform: rotate(60deg);
}

.hexagon::after {
  transform: rotate(-60deg);
}

.hexagon::before::before {
  transform: rotate(120deg)
}

.hexagon::before::after {
  transform: rotate(-60deg)
}

.hexagon::after::before {
  transform: rotate(60deg)
}

.hexagon::after::after {
  transform: rotate(-120deg)
}

img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 999;
  max-width: 100%;
  max-height: 100%;
}

示例完成后，效果如下：

以上就是css3实现六边形边框的攻略，希望对您有所帮助！

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：css3实现六边形边框的实例代码 - Python技术站

赞 (0)
0 0 打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023年6月10日
下一篇 2023年6月10日

相关文章

  • h5页面背景图很长要有滚动条滑动效果的实现

    针对“h5页面背景图很长要有滚动条滑动效果的实现”，我们可以采用以下步骤： 步骤一：设置页面背景图 首先，在HTML文件中设置背景图。这可以通过在CSS文件中添加以下代码实现： body { background-image: url("/images/background.jpg"); /* 用具体的图片路径替换"/image…

    css 2023年6月10日
    00

  • 纯css实现（无脚本）Html指令式tooltip文字提示效果

    让我来详细讲解一下纯css实现Html指令式tooltip文字提示效果的教程。 准备工作 在开始之前，我们需要一个具有一定功能的Html标签，比如<a>。我们将使用这个标签来演示我们的Tooltip效果。 实现过程 第一步：设置提示框的样式 我们可以使用CSS的伪元素:before或:after来创建一个tooltip框。在这个框中，我们可以展示…

    css 2023年6月9日
    00

  • 网页设计师学习网页设计的经验和技巧小结

    下面我来详细讲解“网页设计师学习网页设计的经验和技巧小结”的完整攻略。 1. 掌握基本技能 在学习网页设计时，首先要掌握基本的技能，包括HTML、CSS、JavaScript等基础知识。只有掌握了这些基础技能，才能进行更高级的网页设计学习和创作。 2. 学习设计原则 网页设计不仅要注重技术方面的实现，还要注重美感与用户体验。学习设计原则可以帮助你更好地理解设…

    css 2023年6月9日
    00

  • css屏幕居中的方法(推荐)

    下面我给您详细讲解“CSS屏幕居中的方法(推荐)”的完整攻略。 方法1：使用 Flexbox实现居中 步骤1：设置父元素的display为flex，让子元素可以排列 .container{ display: flex; } 步骤2：使用justify-content和align-items设置子元素的居中方式 justify-content属性是用来设置主轴…

    css 2023年6月9日
    00

  • HTML外部样式表如何引入CSS样式

    以下是“HTML外部样式表如何引入CSS样式”的完整攻略： HTML外部样式表如何引入CSS样式 在 HTML 中，可以使用外部样式表来引入 CSS 样式。以下是一些常见的用法。 使用 <link> 标签 可以使用 <link> 标签来引入外部样式表，例如： <!DOCTYPE html> <html> &lt…

    css 2023年5月18日
    00

  • HTML+CSS+JavaScript实现图片3D展览的示例代码

    HTML+CSS+JavaScript实现图片3D展览，其基本思路是通过HTML布局实现图片容器，CSS样式实现3D旋转效果，JavaScript实现交互和事件。下面我们就来一步步讲解实现的具体方法。 第一步：布局HTML 在HTML中创建一个外层容器div，设置宽高以及透视效果，然后在容器中添加一个内层容器ul，设置相应的宽高和位置。在ul中添加li标签作…

    css 2023年6月10日
    00

  • 解决列高度自适应(相同)的五种方法

    解决列高度自适应(相同)的五种方法 在前端开发中，经常遇到需要为一组列设置等高度的情况，尤其是响应式布局中更容易产生高度不一致的问题。下面将介绍解决列高度自适应(相同)的五种方法。 1. 使用display: flex 使用display: flex可以很容易的实现列等高，只需要将列的父元素设为flex布局，然后将子元素的align-self设置为stret…

    css 2023年6月11日
    00

  • 浅析CSS中的4种引入方式及优先级

    当我们开发网站时，CSS样式表是必不可少的一部分。在CSS中，有4种不同的方式来引入样式表，即内部样式表、外部样式表、行内样式和导入样式。每种引入方式都有其优缺点和适用场景，而优先级则是CSS样式表中重要的概念。本文将详细讲解CSS中的4种引入方式及其优先级。 内部样式表 内部样式表是嵌入在HTML文档中的样式表，通常放在标签中的 标签中。这种方式适用于只需…

    css 2023年6月10日
    00
合作推广
合作推广
分享本页
返回顶部