Question

我想只使用CSS创建一个旗形元素。我希望这个元素具有响应性，即我希望它在宽度上增长/缩小，因为它的父div会随页面增长/缩小。

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;
}

我尝试将border-left和border-right更改为50％。这不起作用。我不能在这个项目上使用大众单位。

我可以用Javascript来做。但我需要能够单独使用CSS。

Answer 1

如果您可以使用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)">

响应标志元素css只

1 个答案: