如何获得'div'形状作为一个标志与CSS [英] How to get 'div' shaped as a flag with CSS

问题描述

我想在网站上的某些元素上添加标签，并为底部设有倒V形切口的标签设计。

到目前为止我有这个：

HTML

  div class =css-shapes>< / div> 
  

CSS

  .css-shapes {
 border-left：99px solid＃f00fff; 
 border-right：99px solid＃f00fff; 
 border-bottom：39px solid transparent; 
} 
  

和 transform rotation以创建如下的轮廓横幅：

• code>：和：之后： ：



• 超过部分被父母的 overflow：hidden 以形成我们的横幅：

• 使用 box-shadow 并且通过将x轴拉/推46×m来防止两个角度重叠。 box-shadow：46px 0 0 3px＃000

h2>

  div {height：100px; width：100px; margin：100px auto;位置：相对; overflow：hidden; border：solid 3px＃000; border-bottom：none; text-align：center;} div：before，div：after {content：'';显示：block;高度：100％; width：200％; transform：rotate（20deg）; box-shadow：46px 0 0 3px＃000; position：absolute; top：1px; right：-120％;} div：after {transform：rotate（-20deg）;左：-120％; box-shadow：-46px 0 0 3px＃000;}  

 < div>文字< / div>  

I want to add a label on some of my elements on a website and design for a label that is a flag with an inverted V-shaped cut at the bottom.

So far I have this:

HTML

<div class="css-shapes"></div>

CSS

.css-shapes{
    border-left: 99px solid #f00fff;
    border-right: 99px solid #f00fff;
    border-bottom: 39px solid transparent;
}

http://jsfiddle.net/yhexkm4u/2/

However, I need the background to be white and border around this shape in purple and 1px. I was trying to fit the same shape just in white inside of this one, but everything got messy and didn't go as expected.

Maybe it is a wrong approach, but I want to end up with labels that would look something like this:

解决方案

Here is a slightly different method using pseudo-elements and transform rotations to create an outlined banner like this:

• This angled shape is created with position: absolute pseudo-elements, :before and :after:

• The excess is cut off with overflow: hidden on the parent to form our banner:

• The outline is created with box-shadow and the two angles are prevented from overlapping by pulling / pushing the x-axis by 46px — box-shadow: 46px 0 0 3px #000

Full Example

div {
  height: 100px;
  width: 100px;
  margin: 100px auto;
  position: relative;
  overflow: hidden;
  border: solid 3px #000;
  border-bottom: none;
  text-align: center;
}
div:before,
div:after {
  content: '';
  display: block;
  height: 100%;
  width: 200%;
  transform: rotate(20deg);
  box-shadow: 46px 0 0 3px #000;
  position: absolute;
  top: 1px;
  right: -120%;
}
div:after {
  transform: rotate(-20deg);
  left: -120%;
  box-shadow: -46px 0 0 3px #000;
}

<div>Text</div>

这篇关于如何获得'div'形状作为一个标志与CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！