Skip to content

Instantly share code, notes, and snippets.

@cocodrips
Last active August 29, 2015 14:02
Show Gist options
  • Select an option

  • Save cocodrips/07af623e89efb62e5e50 to your computer and use it in GitHub Desktop.

Select an option

Save cocodrips/07af623e89efb62e5e50 to your computer and use it in GitHub Desktop.
cssでリボンつくるよっ
/*親要素*/
.ribbon-article {
overflow: hidden;
position: relative;
width: 200px;
height: 100px;
background-color: #f4edd4;
}
/*リボンタグ*/
.side-corner-tag {
display: inline-block;
position: absolute;
/*このあたりをいじるとリボンの位置を調整できるよ*/
top: 10px;
right: -25px;
height: 30px;
width: 100px;
background-color: #d32127;
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.2), inset 0px 3px 20px rgba(255, 255, 255, 0.2);
}
.side-corner-tag .label {
position: absolute;
height: 20px;
width: 100%;
top: 5px;
border: 1px #fff dashed;
border-width: 1px 0;
text-align: center;
font-weight: bold;
color: #fff;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment