CSS 見出しデザイン

h2 {
    width: 300px;
    padding: 0 100px 10px 10px;
    border-bottom: none;
}
h2:after {
    position: relative;
    top: -5px;
    left: -10px;
    content: "";
    float: left;
    background: #58b;
    width: 10px;
    height: calc(1.5em + 10px);
    border-radius: 10px;
}

h2 {
    width: 300px;
    padding: 0 100px 5px 10px;
    border-top: none;
    border-left: 7px solid;
    border-bottom: 2px solid;
    border-color: #58b;
}

h2 {
    width: 300px;
    padding: 0 100px 10px 10px;
    background-image: repeating-linear-gradient(135deg, #fff, #fff 3px, #58b 3px, #58b 6px, #fff 6px, #fff 9px, #58b 9px, #58b 24px);
    background-repeat: no-repeat;
    background-size: 100% 5px;
    background-position: left 0 bottom 0px;
}