3

我的形状有斜坡边框底部的问题。我有这个：

在此处输入图像描述

我做了左侧和右侧，但我不知道如何修改中心部分。请帮忙。

我的代码。

h3{
    font-size: 60px;
    position: relative;
    display: inline-block;
    padding: 10px 30px 8px 30px;
    height: 80px;
    width: auto;
    background: #000;
    line-height: 80px;
    margin-bottom: 20px;
    font-family: 'Bitter', 'Trebuchet MS', Arial;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.9);
    color: white;

}

h3::before{
    content: '';
    width: 0;
    height: 0;
    border-top: 38px solid transparent;
    border-bottom: 60px solid transparent;
    border-right: 60px solid black;
    position: absolute;
    left: -59px;
    top: 0px;
    background: red;
}
h3::after{
    content: '';
    width: 0;
    height: 0;
    border-top: 38px solid transparent;
    border-bottom: 60px solid transparent;
    border-left: 60px solid black;
    position: absolute;
    right: -59px;
    top: 0px;
    background: red;
}

HTML 是一个简单的<h3>标题。

4

2 回答 2

2

有问题的形状可以通过旋转具有一点透视的元素来实现。这个想法如下：（与您使用的方法不同，但我认为这是最好的）。

  • 用两个伪元素将容器分成两半
  • 沿 X 轴的一个方向旋转一半，沿相反方向旋转另一半。这样做会产生一个规则的细长六边形形状和
  • 然后沿 Y 轴旋转整个父对象。
  • 所有的旋转都是通过一点透视来完成的，因此看起来好像一侧比另一侧更宽。

使用这种方法产生的形状可以具有透明（或）半透明（或）纯色背景。

基于 CSS 的方法的一些缺点是：

  • 如果图像需要适合形状，则不适合。
  • 形状是可缩放的，但随着宽度的增加，视角和旋转角度可能需要根据增加的量进行调整。
  • 即使鼠标在形状之外，由于它的创建方式，也会触发形状上的悬停效果。问题是关于<h3>元素的形状，所以hover可能不是一个大问题。

下面是一个示例片段：

.container {
  position: relative;
  height: 100px;
  width: 300px;
  text-align: center;
  line-height: 100px;
  margin: 10px auto;
  font-size: 20px;
}
.shape {
  position: absolute;
  top: 0px;
  right: 0px;
  height: 100%;
  width: 75%;
  perspective: 10px;
  transform-origin: right 50%;
  transform: perspective(31px) rotateY(2deg);
}
.shape:before,
.shape:after {
  position: absolute;
  content: '';
  left: 0px;
  height: 50%;
  width: 100%;
  background: rgba(0, 0, 0, 0.3);
  z-index: -1;
}
.shape:before {
  top: 0px;
  transform-origin: left bottom;
  transform: rotateX(5deg);
}
.shape:after {
  bottom: 0px;
  transform-origin: 0% top;
  transform: rotateX(-5deg);
}
.container span {
  position: relative;
  display: inline-block;
  height: 100%;
  width: 75%;
  color: white;
  z-index: 2;
}
.solid .shape:after,
.solid .shape:before {
  background: maroon;
}
.transparent .shape:after,
.transparent .shape:before {
  background: transparent;
  border: 2px solid;
}
.transparent .shape:after {
  bottom: -3px;
  border-width: 0px 3px 3px 2px;
}
.transparent .shape:before {
  top: -3px;
  border-width: 3px 3px 0px 2px;
}
.shape:hover:after,
.shape:hover:before,
span:hover + .shape:before,
span:hover + .shape:after {
  background: rgba(0, 0, 0, 0.6);
}
/* just for demo */

body {
  background: linear-gradient(90deg, crimson, indianred, purple);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class='container'>
  <span>Hello World</span>
  <div class='shape'></div>
</div>
<div class='container solid'>
  <span>Hello World</span>
  <div class='shape'></div>
</div>
<div class='container transparent'>
  <span>Hello World</span>
  <div class='shape'></div>
</div>

在使用 SVG 创建形状时，可以避免 CSS 方法的所有缺点。

.vector {
  position: relative;
  height: 100px;
  width: 300px;
  text-align: center;
  line-height: 100px;
  margin: 10px auto;
  font-size: 20px;
}
svg {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
}
polygon {
  fill: rgba(0, 0, 0, 0.5);
}
polygon.solid{
  fill: maroon;
}
polygon.transparent{
  fill: transparent;
  stroke-width: 2;
  stroke: black;
}
polygon.image {
  fill: url(#image);
}
.vector span {
  position: relative;
  color: white;
  z-index: 2;
}
polygon:hover,
span:hover + svg polygon {
  fill: rgba(0, 0, 0, 0.3);
  stroke-width: 2;
  stroke: black;
}
/* just for demo */

body {
  background: linear-gradient(90deg, crimson, indianred, purple);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class='vector'>
  <span>Hello World</span>
  <svg viewBox='0 0 350 100' preserveaspectratio='none'>
    <polygon points='0,50 70,7 310,15 350,50 310,85 70,93' />
  </svg>
</div>
<div class='vector'>
  <span>Hello World</span>
  <svg viewBox='0 0 350 100' preserveaspectratio='none'>
    <polygon points='0,50 70,7 310,15 350,50 310,85 70,93' class="solid"/>
  </svg>
</div>
<div class='vector'>
  <span>Hello World</span>
  <svg viewBox='0 0 350 100' preserveaspectratio='none'>
    <polygon points='0,50 70,7 310,15 350,50 310,85 70,93' class="transparent"/>
  </svg>
</div>
<div class='vector'>
  <span>Hello World</span>
  <svg viewBox='0 0 350 100' preserveaspectratio='none'>
    <defs>
      <pattern id='image' width='350' height='100' patternUnits='userSpaceOnUse'>
        <image xlink:href='http://lorempixel.com/350/100' width='350' height='100' />
      </pattern>
    </defs>
    <polygon points='0,50 70,7 310,15 350,50 310,85 70,93' class='image' />
  </svg>
</div>

于 2015-05-09T14:31:04.493 回答
2

检查它适用的这个纯CSS解决方案transform perspective 

div {
    cursor:pointer;
    width:200px;
    height:100px;
    transform:perspective(500px) rotateY(40deg);
    background:orange;
    margin:50px;
    overflow:visible;
}
div:after {
    position:absolute;
    content:"";
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-bottom: 50px solid transparent;
    border-right:60px solid orange;
    margin-left:-60px;
}
div:before {
    position:absolute;
    content:"";
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-bottom: 50px solid transparent;
    border-left: 60px solid orange;
    margin-left:200px;
    transition:.5s all;
}

div:hover{
    background:grey;
}
div:hover:before{
     border-left-color: grey;
}
div:hover:after{
    border-right-color: grey;

}
<div>

于 2015-05-09T14:35:52.607 回答