类似这样的标题，英文被切去一部分，除了用图片，求助有什么好的解决方案么

后面是背景图，不是纯色

html css

阅读 3.6k

6 个回答

得票最新

PMC2018

561

发布于
2018-12-12

✓ 已被采纳

可以用overflow：hidden来实现，背景可以放任意图片


<div class="wrapper">
    <div class="word"><p>ABOUT<span></span></p></div>
</div>
<style>
    .wrapper{
        width: 250px; 
        height: 100px; 
        background: url(http://t2.hddhhn.com/uploads/tu/201610/198/hkgip2b102z.jpg) 57%;
        color: #fff;
    }
    .wrapper .word{
        transform: rotateZ(30deg);
        overflow: hidden;
        width: 107px;
        font-size:35px;
    }
    .wrapper .word p{
        position: relative;
        transform: rotateZ(-30deg);
    }
    .word span{
        position: absolute;
        right: -30px;
        top: 13px;
        height: 36px;
        width: 24px ;
        border-left: 2px solid #fff;
        transform: rotateZ(30deg);
    }
</style>

图片描述

攻城狮Lee丶

2.8k3833

发布于
2018-12-12

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .label{width: 400px; height: 100px; background:#007DDB; color: #fff;margin: 100px auto; text-align: center;}
            .label div{display: inline-block; vertical-align: middle;font-size:24px ;}
            .label .let{font-size: 40px;position: relative;}
            .let em{position: absolute;right: 0;height: 100%;width: 24px; background:#007DDB ;border-left: 1px solid #fff; transform-origin: bottom left; transform: rotateZ(32deg);}
            .rgt{position: relative;z-index: 2;}
        </style>
    </head>
    <body>
        <div class="label">
            <div class="let">ABOUT<em></em></div>
            <div class="rgt">走进建业</div>
        </div>
    </body>
</html>

幽丶墨

6951313

发布于
2018-12-12

方法有很多，也可以用伪元素遮盖住右侧一部分

<div class="content">ABCDEF</div>
<style>
 .content {
  width: 155px;
  height: 100px;
  line-height: 100px;
  text-align: center;
  font-size: 30px;
  background: #365972;
  position: relative;
  overflow: hidden;
}
.content::before {
  position: absolute;
  content: ' ';
  width: 36px;
  height: 118px;
  background: #365972;
  left: 120px;
  top: 0;
  border-left: 2px solid #ffffff;
  transform: rotate(30deg);
}
</style>