cssでリボンつくるよっ

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