css에서는 Vue와 SVG로 구현할 수없는 무차별 디자인을 구현합니다.
디자이너의 무차 흔들림
이런 연설 거품을 구현한다고 말한 적이 있습니까?
텍스트 부분은 동적으로 바뀝니다라는 부분입니다.
이것이 어떻게 css로 실현되는지 생각해 보겠습니다.
css는 버리고 SVG
문서 를 보면 할 수 있을 것 같다.
해봤어
adobeXD로 만든 풍선을 svg로 출력하여 vue를 붙였습니다.
<template>
<!-- eslint-disable max-len -->
<div v-bind:style="{ display: 'inline-block', width: size }">
<svg viewBox="0 0 209.001 51">
<defs>
<filter id="合体_1" width="209.001" height="51" x="0" y="0" filterUnits="userSpaceOnUse">
<feOffset dx="3" dy="3"/>
<feGaussianBlur result="blur" stdDeviation="1.5"/>
<feFlood flood-color="#5d5d5d" flood-opacity=".161"/>
<feComposite in2="blur" operator="in"/>
<feComposite in="SourceGraphic"/>
</filter>
</defs>
<g id="サジェストバルーン" transform="translate(1.5 1.5)">
<g class="cls-5" transform="translate(-1.5 -1.5)">
<g id="合体_1-2" class="cls-1" data-name="合体 1">
<path d="M-7208.498 45.5H-7371.5a17.882 17.882
0 0 1-12.728-5.271c-3.399-3.4-5.272-7.92-5.272-12.728s1.873-9.329 5.272-12.728c3.4-3.4
7.92-5.272 12.728-5.272h78.001l.15-.2 3.35-4.467 3.35 4.467.15.2h78.001c4.808 0 9.328
1.872 12.727 5.272 3.4 3.4 5.273 7.92 5.273 12.728s-1.873 9.328-5.273 12.728c-3.399
3.4-7.92 5.272-12.727 5.272z" class="cls-3" transform="rotate(180 -3594.25 23.75)"
/>
<path d="M-7208.498 45c4.674 0 9.069-1.82 12.374-5.125a17.385 17.385 0 0 0
5.126-12.374c0-4.675-1.82-9.07-5.126-12.375a17.385 17.385 0 0 0-12.374-5.125h-78.25l-.3-.4-2.951-3.934-2.95
3.934-.3.4h-78.25c-4.675 0-9.07 1.82-12.375 5.125A17.386 17.386 0 0 0-7389 27.501c0 4.674 1.82 9.069 5.126
12.374a17.386 17.386 0 0 0 12.374 5.126h163.002m0 1H-7371.5c-10.217 0-18.5-8.283-18.5-18.5 0-10.218 8.283-18.5
18.5-18.5h77.751l3.75-5 3.75 5h77.751c10.217 0 18.5 8.282 18.5 18.5 0 10.217-8.283 18.5-18.5 18.5z"
class="cls-4"
transform="rotate(180 -3594.25 23.75)"
/>
</g>
</g>
<text id="テキスト" x="50%" y="50%" text-anchor="middle" class="cls-2">
<slot></slot>
</text>
</g>
</svg>
</div>
</template>
<script lang="ts">
import Vue, { PropType } from 'vue';
export default Vue.extend({
props: {
size: {
type: String as PropType<string>,
default: '100%',
},
},
});
</script>
<style>
.cls-1{fill:#fff}
.cls-2,.cls-4{fill:#2f73dd}
.cls-2{font-size:12px;}
.cls-3,.cls-4{stroke:none}
.cls-5{filter:url(#合体_1)}
</style>
했던 일
중요한 변화는 이것뿐입니다.
- svg의 style 요소는 style로 이동합니다.
- 텍스트를 넣고 싶은 곳은 slot로 변경
과제
Reference
이 문제에 관하여(css에서는 Vue와 SVG로 구현할 수없는 무차별 디자인을 구현합니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/coa00/items/6099a789e4639821f316텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)