僅響應標誌元素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

回答

相關問題