Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
ゆあちゃん&ぱちおさん専用つべアンケデザイン
/* グリーンバック */
body {
background-color: lime;
}
.questionnaire__result {
text-align: left;
margin-top: 20px;
width : 80%;
}
.questionnaire__result-window {
text-align: center;
width: 100%;
min-height: 300px;
padding: 10px;
}
/* 画面上部のアンケートタイトル部分 */
.questionnaire__result-title {
font-size: 1.75em;
width: 100%;
padding: 30px;
color: #fff;
text-align: center;
background: #444444;
}
/* アンケート項目text部分 */
.questionnaire__result-text {
color: #444444;
font-size: 1.5em;
}
/* アンケートの枠デザイン */
.questionnaire__result-item {
display: inline-block;
position: relative;
width: 330px;
vertical-align: top;
padding: 25px;
overflow-wrap: break-word;
color: #fff;
background: #ffe181;
box-shadow: 0px 0px 0px 10px #ffe181;
border: solid 2px #ffffff;
border-image: linear-gradient(180deg, rgba(94,122,255,1) 0%, rgba(233,5,117,1) 100%);
border-image-slice: 1;
margin: 20px 15px;
text-align: center;
}
.questionnaire__result-item::before {
content: '';
position: absolute;
bottom: 0;
right: 50px;
z-index: 10;
width: 40px;
height: 25px;
background-color: rgb(243, 246, 205, 0.7);
border-radius : 75% / 100%;
box-shadow: 45px 0 0 rgba(243, 246, 205, 0.7);
filter: drop-shadow(0 4px 0 rgb(19, 28, 75));
transform: rotate(-10deg);
}
.questionnaire__result-item::after {
content: '';
position: absolute;
bottom: 15px;
right: 42px;
z-index: 10;
width: 12px;
height: 5px;
border-radius: 100%;
background-color: rgb(19, 28, 75);
transform: rotate(-10deg);
}
/* パーセンテージ(黄色)の部分 */
.questionnaire__result-percentage {
color: #524800;
font-weight: bold;
text-stroke: 1px #524800;
-webkit-text-stroke: 1px #524800;
font-size: 1.75em;
}

いつもお世話になっています。感謝を込めて。💐 image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment