CSS 里面有文字的css形状

css shapes with text inside it

提问by umanga shrestha

I need to create this kinda shape in the image below which contains text in it.

我需要在下面的图像中创建这种包含文本的形状。

This is how I tried :

这就是我尝试的方式：

HTML

HTML

        <div class="header-bottom">

            <div class="blue-rectangle">
                <p>sadasdasdasd</p>
            </div>

            <div class="blue-rectangle">
                <p>dsasdasdasda</p>
            </div>

        </div>

CSS

CSS

.header-bottom{
position: absolute;
right:13%;
bottom:5%;
}

.blue-rectangle {
background-color: rgba(3,78,136,0.7);
padding: 10px 20px 10px 200px;
margin-bottom: 20px;
}

.blue-rectangle p{
color:white;
text-transform: uppercase;
font-size:18px;
}

i tried adding transform:skew but it skews both right, left and the text itself.

我尝试添加 transform:skew 但它向右、向左和文本本身倾斜。

采纳答案by G-Cyrillus

for infos :

信息：

background gradient and background size can be used too :)

也可以使用背景渐变和背景大小:)

.shape{
  text-align:center;
  background:
    linear-gradient(65deg , transparent 50%,rgba(3,78,136,0.7) 50%) left no-repeat, 
    linear-gradient(0deg , rgba(3,78,136,0.7),rgba(3,78,136,0.7)) 30px 0 no-repeat;
  
  background-size:30px 100%, 100% 100%;
  width:200px;
  height:60px;
  line-height:60px;
  padding:0 20px;
  color:white;
  margin:20px auto;
  position:relative;
}
body {
  background:url(http://lorempixel.com/640/480);
  background-size:cover;
  }

<div class="shape">
  sometext
</div>
<div class="shape">
  something else
</div><div class="shape">
  some more text 
</div>
<div class="shape">
  and so on  n on 
</div>

回答by Pepo_rasta

.shape{
  text-align:center;
  background-color:rgba(3,78,136,0.7);
  width:200px;
  height:60px;
  line-height:60px;
  color:white;
  margin:20px auto;
  position:relative;
}
.shape:before{
  content:"";
  width:0px;
  height:0px;
  border-top:60px solid rgba(3,78,136,0.7);
  border-left:60px solid transparent;
  position:absolute;
  right:100%;
  top:0px;
}

<div class="shape">
  something something
</div>
<div class="shape">
  something else
</div>

回答by LinkinTED

I like to use a :beforepseudo class for this:

我喜欢为此使用:before伪类：

.blue-rectangle {
  color:white;
  text-transform: uppercase;
  font-size:18px;
  padding: 10px 20px 10px 200px;
  background-color: rgba(3,78,136,0.7);
  width: 200px;
  position: relative;
  margin-left: 50px;
}
.blue-rectangle:before {
  content: "";
  position: absolute;
  border: 21px solid transparent;
  border-top-color: rgba(3,78,136,0.7);
  border-right-color: rgba(3,78,136,0.7);
  right: 100%;
  top: 0;
  width: 0;
  height: 0
}

<p class="blue-rectangle">sadasdasdasd</p>

回答by w3debugger

Please try following code

请尝试以下代码

.header-bottom {
  position: absolute;
  right: 13%;
  bottom: 5%;
}
.blue-rectangle {
  height: 60px;
  background-color: rgba(3, 78, 136, 0.7);
  padding: 10px 20px 10px 200px;
  margin-bottom: 20px;
  position: relative;
}
.blue-rectangle p {
  color: white;
  text-transform: uppercase;
  font-size: 18px;
  position: relative;
}
.blue-rectangle:before {
  content: '';
  width: 0;
  height: 0;
  border-top: 80px solid rgba(3, 78, 136, 0.7);
  border-left: 80px solid transparent;
  position: absolute;
  top: 0;
  right: 100%;
}

<div class="header-bottom">

  <div class="blue-rectangle">
    <p>sadasdasdasd</p>
  </div>

  <div class="blue-rectangle">
    <p>dsasdasdasda</p>
  </div>

</div>

回答by Peter Wong

In your case, you can't use skew. Instead, you should add a rotated triangle on the left.

在您的情况下，您不能使用偏斜。相反，您应该在左侧添加一个旋转的三角形。

Try add:

尝试添加：

.blue-rectangle:before {
    content: "";
    border-left: 78px solid transparent;
    border-top: 78px solid rgba(3,78,136, 0.7);
    position: absolute;
    top: 0;
    left: -78px;
    opacity: 0.7;
}

You may do the rest of the tuning yourself.

您可以自己完成其余的调整。