欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

css實(shí)現(xiàn)右上角飄帶效果的完整代碼

  發(fā)布時(shí)間：2022-03-18 16:20:32   作者：爾嶸   我要評論
本文通過實(shí)例代碼給大家介紹了css右上角飄帶效果，代碼簡單易懂，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友參考下吧

效果：

完成代碼：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0 auto;
				padding: 0;
			}
			.wrap {
				/* 設(shè)置寬高 */
			    width: 350px;
			    height: 150px;
			    text-align: center;
			    position: relative; /* 父元素相對定位 */
			    overflow: hidden;
			    background-color: #160e41; /* 背景顏色 */
				border: 1px solid #16f5e6;
			}
			
			.ribbon {
			  /* 右上角飄帶 */
			  background-color: #54CBFF; /* 左上角飄帶的背景顏色 */
			  overflow: hidden;
			  white-space: nowrap; /* 文字不換行*/
			  position: absolute; /* 絕對定位 */
			  right: -40px;
			  top: 10px;
			  transform: rotate(45deg);   /* 旋轉(zhuǎn)45°*/
			  box-shadow: 0 0 10px #888; /* 飄帶的陰影*/
			}
			
			.ribbon span {
			  border: 1px solid #54CBFF;
			  color: #fff;
			  display: block;
			  font: bold 100% 'Helvetica Neue', Helvetica, Arial, sans-serif;
			  margin: 1px 0;
			  padding: 5px 50px;
			  text-align: center;
			  text-shadow: 0 0 5px #444;
			}
 
		</style>
	</head>
	<body>
		<div class='wrap'>
		    <div class='ribbon'>
		        <span>NEW</span>
		    </div>
		</div>
 
	</body>
</html>

參考：

【1】css實(shí)現(xiàn)左上角飄帶效果

到此這篇關(guān)于css實(shí)現(xiàn)右上角飄帶效果的完整代碼的文章就介紹到這了,更多相關(guān)css右上角飄帶內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

相關(guān)文章

  • css實(shí)現(xiàn)左上角飄帶效果的完整代碼

    這篇文章主要介紹了css實(shí)現(xiàn)左上角飄帶效果的完整代碼,代碼分為html和css兩部分組成，代碼簡單易懂，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
    2022-03-18

最新評論