0
요구 사항이 있지만 내 요구 사항을 설명하는 방법을 이해할 수 없어서 내 질문에 대한 명확한 아이디어를 줄 수있는 이미지를 만듭니다.미리보기 배너를 asp.net 웹 페이지에 추가하는 방법은 무엇입니까?
요구 사항이 있지만 내 요구 사항을 설명하는 방법을 이해할 수 없어서 내 질문에 대한 명확한 아이디어를 줄 수있는 이미지를 만듭니다.미리보기 배너를 asp.net 웹 페이지에 추가하는 방법은 무엇입니까?
은 그것은 "리본"효과라고합니다. 나는 codepen here을 작성하여 CSS를 지저분하게하지 않고 가능한 한 간단하게 처리하는 방법을 보여 주었다.
.ribbon-wrapper {
position: relative;
left: -41px;
top: 49px;
width: 150px;
-ms-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
border-color: #a00;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
border-bottom: 30px solid #a00;
box-shadow: 0px 6px 5px -5px rgba(0, 0, 0, 0.5);
z-index: 999;
}
.ribbon-wrapper .ribbon {
position: absolute;
left: -15px;
top: 2px;
border-bottom: 1px dotted rgba(255, 255, 255, 0.7);
width: 180px;
text-align: center;
}
.ribbon-wrapper .ribbon a {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 13px;
font-weight: 700;
color: #d8d8d8;
text-decoration: none;
text-shadow: 0 -1px rgba(0, 0, 0, 0.5);
text-align: center;
line-height: 22px;
display: inline-block;
border-top: 1px dotted rgba(255, 255, 255, 0.7);
transition: color 500ms ease;
}
.ribbon-wrapper .ribbon a:hover {
color: #fff;
text-shadow: 0 1px rgba(0, 0, 0, 0.85);
}
감사합니다. @nikhil – user6503334
가 다른 페이지에 페이지의 스냅 샷을 원하십니까 :
귀하의 HTML은 다음이
만큼 간단해야는 CSS입니까? – VirginieLGB
그리고 당신의 질문은 무엇입니까? – SZenC