问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

纯css如何绘制一个无背景色有边框色，带有文字的倒等腰梯形？

头像
列车
    15025390

    纯css绘制倒过来的等腰梯形的样式。而且可以把梯形的背景色调整为无色。
    可以接受复杂代码（比如布局复杂，单个div单个css样式是无法完成，需要多个div搭配多个样式），但是至少满足以下要求
    （1）可以调整边框的颜色大小粗细等，
    （2）可以调整边框内外阴影
    （3）梯形里面还能放文字

    参考效果
    参考1

    不要求一定如参考图上的绚丽，

    前端csscss3
    阅读 593
    avatarAI BotBETA
    要实现一个无背景色、有边框色且带有文字的倒等腰梯形，可以使用CSS的`border`属性和`transform`属性来完成。以下是一个示例代码：

    <!DOCTYPE html>
    <html lang="en">
    <head>

    <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Inverted Isosceles Trapezoid</title>
<style>
    .trapezoid {
        position: relative;
        width: 200px;
        height: 100px;
        border-left: 50px solid transparent;
        border-right: 50px solid transparent;
        border-bottom: 100px solid #000; /* 边框颜色 */
        border-top: none;
        background: none; /* 无背景色 */
        color: #fff; /* 文字颜色 */
        text-align: center;
        line-height: 100px; /* 垂直居中文字 */
        transform: rotateX(180deg); /* 倒置梯形 */
        transform-origin: bottom; /* 旋转原点设置到底部 */
        margin-top: -100px; /* 调整位置，使梯形显示在视口中 */
    }

    .trapezoid::after {
        content: "";
        position: absolute;
        top: 0;
        left: -50px;
        right: -50px;
        bottom: 0;
        border: 2px solid #ff0000; /* 边框粗细和颜色 */
        pointer-events: none; /* 防止边框覆盖文字 */
    }
</style>

    </head>
    <body>

    <div class="trapezoid">
    文字内容
</div>

    </body>
    </html>

    
在这个示例中：
- 使用`border`属性创建了一个梯形形状，其中`border-left`和`border-right`设置为透明，`border-bottom`设置为所需的颜色和高度，`border-top`设置为`none`。
- 使用`transform: rotateX(180deg)`将梯形倒置。
- 使用`transform-origin: bottom`将旋转原点设置到底部，以确保梯形正确倒置。
- `margin-top: -100px`用于调整梯形位置，使其显示在视口中。
- `::after`伪元素用于添加边框，并设置边框的颜色和粗细。`pointer-events: none`确保边框不会覆盖文字，使其可交互。

你可以根据需要调整`border`的宽度、颜色和`transform`的值，以实现所需的倒等腰梯形效果。
    3 个回答
    得票最新
    头像
    Frank
      38429
      ✓ 已被采纳

      可以用伪类试试

      <div class="container">
    <div class="title">政务大数据共享交换平台</div>
</div>
      .container {
  position: relative;
  width: 400px;
  height: 60px;
  border-bottom: 2px solid #0066ff;
}

.container::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  height: 100%;
  width: 2px;
  background: #0066ff;
  transform: skew(30deg);
  transform-origin: bottom;
  box-shadow: -2px -2px 4px rgba(0, 102, 255, 0.3);
}

.container::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  height: 100%;
  width: 2px;
  background: #0066ff;
  transform: skew(-30deg);
  transform-origin: bottom;
  box-shadow: 2px -2px 4px rgba(0, 102, 255, 0.3);
}

.title {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  text-align: center;
  color: #0066ff;
  font-size: 20px;
  font-weight: bold;
  z-index: 1;
}
      头像
      张旭超
      1.4k11030

      用背景图片吧

      头像
      Swift社区
        16.5k15216

        可以通过 clip-path 属性来实现一个倒等腰梯形，并用 text-align 将文字放置在图形中。示例如下：

        <div class="trapezoid">
  倒等腰梯形
</div>
        .trapezoid {
  width: 200px;
  height: 100px;
  border: 2px solid black;
  clip-path: polygon(0% 100%, 25% 0%, 75% 0%, 100% 100%);
  text-align: center;
  line-height: 100px; /* 设置文字垂直居中 */
  font-size: 16px;
  background-color: transparent; /* 无背景色 */
  position: relative;
}
        撰写回答
        你尚未登录，登录后可以
        • 和开发者交流问题的细节
        • 关注并接收问题和回答的更新提醒
        • 参与内容的编辑和改进，让解决方法与时俱进
        推荐问题
        宣传栏