仅响应标志元素css

我想创建一个仅使用CSS的旗形元素。我希望这个元素能够响应，即我希望它的宽度增长/缩小，因为它的父div随页面增长/缩小。仅响应标志元素css

的HTML：

<div class="container"> 
    <div class="flag">Example text</div> 
</div>

的CSS：

.container { 
    width: 25%; 
} 
.flag { 
    margin: 0 auto; 
    padding: 15px 10px 40px 10px; 
    position: relative; 
    color: white; 
    font-size: 11px; 
    letter-spacing: 0.2em; 
    text-align: center; 
    text-transform: uppercase; 
    background: blue; 
} 
.flag:after { 
    content: ' '; 
    position: absolute; 
    left: 0; 
    bottom: 0; 
    width: 0; 
    height: 0; 
    border-bottom: 25px solid white; 
    border-left: 50px solid transparent; 
    border-right: 50px solid transparent; 
}

我试着改变左边框和右边框是50％。这是行不通的。而且我不能在这个项目上使用vw-units。

我可以用Javascript来做到这一点。但我需要能够完全用CSS来完成。

来源

2014-10-28 user3680688

这不仅仅使用CSS3，但如果您愿意使用它，那么您必须处理可支持SVG的浏览器。 SVG将扩展到任何东西。只是一个想法。 – 2014-10-28 07:03:00

定义“旗形”。请注意，“响应”通常意味着*根据视口尺寸更改布局*。 – 2014-10-28 07:03:14

你的代码现在的工作方式究竟有什么问题？ – 2014-10-28 07:05:07

如果你可以使用CSS3，你可以尝试使用@media查询做到这一点：

您可以将所有的媒体查询在同一个文件：

//例如，一个

@media screen and (min-width: 1200px) { 
    // if browser width >= 1200px, fall into these lines: 
} 

@media screen and (min-width: 768px) and (max-width: 979px) { 
    // if browser width is between 768px ~ 979px, fall into these lines:  
} 

@media screen and (max-width: 767px) { 
    // if browser width <= 768px, fall into these lines: 
} 

@media screen and (max-device-width: 480px) { 
    // if browser width <= 480px, fall into these lines: 
}

或者你可以打破他们到不同的文件

//例如两个

<link rel="stylesheet" type="text/css" href="all.css" media="screen"> 
<link rel="stylesheet" type="text/css" href="a.css" media="screen and (max-width: 767px)"> 
<link rel="stylesheet" type="text/css" href="b.css" media="screen and (min-width: 768px) and (max-width: 979px)"> 
<link rel="stylesheet" type="text/css" href="c.css" media="screen and (min-width: 1200px)"> 
<link rel="stylesheet" type="text/css" href="d.css" media="screen and (max-device-width: 480px)">

来源

2014-10-28 01:33:57

感谢您的建议。但是我正在寻找能够顺利响应窗口宽度变化的东西。 – user3680688 2014-10-28 01:45:03

仅响应标志元素css

回答

相关问题